React Native 如何将Redux selector获取的变量拼接到URL字符串中

问题原因 #

你遇到的报错是两个语法使用错误导致的：

1. ${变量} 是ES6模板字符串的插值语法，*必须用反引号包裹整个字符串才能生效*，你现在用单引号包裹的话，${selectedTicker}`会被当成普通字符串，不会解析对应变量。
2. 普通JS变量赋值场景下不需要给变量套{}，你之前尝试的{'string' + variable}、'string' + {variable}写法里的大括号是JSX语法中标记插值的用法，用在普通JS语句里会把变量包装成对象，拼接后会出现[object Object]之类的异常结果。

正确写法 #

写法1：模板字符串（推荐，可读性更高） #

把原来包裹URL的单引号替换成反引号即可：

const { selectedTicker } = useSelector(navigationSelector.all);

const selectUrl = `https://openapi.naver.com/v1/search/news.json?query=${selectedTicker}&display=5&start=1&sort=sim`;

写法2：普通字符串拼接 #

不需要加额外大括号，直接用加号拼接变量即可：

const { selectedTicker } = useSelector(navigationSelector.all);

const selectUrl = 'https://openapi.naver.com/v1/search/news.json?query=' + selectedTicker + '&display=5&start=1&sort=sim';

补充提示 #

如果selectedTicker可能包含中文、空格、&等URL保留字符，建议用encodeURIComponent()包裹变量，避免URL解析异常：

const selectUrl = `https://openapi.naver.com/v1/search/news.json?query=${encodeURIComponent(selectedTicker)}&display=5&start=1&sort=sim`;

内容的提问来源于stack exchange，提问作者Harry Kim