使用ES6模板字面量构建多行URL字符串时遇问题，求排查

嘿，我来帮你拆解这个用ES6模板字面量处理URL时可能踩的坑！

1. 错误使用HTML实体& #

你写的URL片段里用了&，这是HTML环境下用来转义&的实体编码，但在JavaScript的URL字符串里，直接用&作为参数分隔符就可以了。如果保留&，最终生成的URL会把amp;当作参数名的一部分，导致API请求无法正确解析参数——服务器会误以为你要传的参数是action=parse之后跟着amp;section=0，这显然不符合预期。

举个修正后的例子：

// 错误写法
let url = `https://en.wikipedia.org/w/api.php?action=parse&section=0&prop=text&format=json&page=${topic}`

// 正确写法
let url = `https://en.wikipedia.org/w/api.php?action=parse&section=0&prop=text&format=json&page=${topic}`

2. 模板变量未做URL编码，易破坏URL结构 #

如果你的topic变量包含空格、特殊字符（比如pizza & extra cheese），直接拼接进URL会导致参数失效——比如&会被当成新的参数分隔符，服务器会把page参数的值解析成pizza ，后面的extra cheese会被误判为新的参数。

解决办法是用encodeURIComponent()对变量进行编码，确保特殊字符被正确转义：

let url = `https://en.wikipedia.org/w/api.php?action=parse&section=0&prop=text&format=json&page=${encodeURIComponent(topic)}`

3. 多行模板字面量的换行陷阱（如果你的URL是换行编写的） #

如果为了可读性把URL拆成多行写，模板字面量会把换行符也包含进最终的URL里，导致URL无效。比如：

// 错误写法：换行符会被带入URL
let url = `https://en.wikipedia.org/w/api.php?
action=parse&
section=0&
prop=text&
format=json&
page=${encodeURIComponent(topic)}`

可以用两种方式规避：

// 方式1：用反斜杠取消换行
let url = `https://en.wikipedia.org/w/api.php?\
action=parse&\
section=0&\
prop=text&\
format=json&\
page=${encodeURIComponent(topic)}`

// 方式2：用数组拼接后再join，可读性更好
let urlParts = [
  'https://en.wikipedia.org/w/api.php?',
  'action=parse',
  'section=0',
  'prop=text',
  'format=json',
  `page=${encodeURIComponent(topic)}`
]
let url = urlParts.join('&')

另外，你提供的代码片段里${to...是截断状态，要确保变量名完整且已提前声明赋值，否则会抛出ReferenceError哦。

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