使用模板字面量构造href传递数组数据不生效问题

开发过程中需要通过a标签的href属性拼接WhatsApp链接传递数据，使用模板字面量拼接字符串、简单对象类型数据时功能正常，但传递数组类型的购物车商品数据时无法达到预期效果。
当前拼接链接的代码如下：

const link =`https://wa.me/number?text=Thanks%20for%20your%20purchase%20${input.name}!%0A${items}%0AName:%20${input.name}%0AAdress:%20${input.addess}%0APhone:%20${input.Phone}%0ACity:%20${input.city}%0ATotal:%20$${total}`

构造购物车商品数组items的代码如下：

const items = cart && cart.map((p, i) => {
    return(
      `<div>
      <h4>${p.title}</h4>
       <div>
           {p.salsa && p.salsa.map(item => <li>{item}</li>)}
       </div>
       <div>
           {p.toppings && p.toppings.map(item => item)}
       </div>
       <h4>${p.quantity}</h4>
       <h4>${p.Comments}</h4>
      </div>`
    )
})

现有写法存在3个核心问题：

• Array.map()的返回值是数组类型，直接插入模板字符串时，JS会隐式调用数组的toString()方法，把所有元素用逗号拼接成字符串，既不会保留预设格式，也会导致内容排版混乱。
• 模板字符串是原生JS语法，不会解析你写的JSX逻辑（大括号包裹的判断、遍历代码），这些内容会被直接当成普通文本输出，根本不会执行salsa、toppings两个子数组的遍历逻辑。
• WhatsApp链接的text参数仅支持纯文本内容，不支持解析HTML标签，你写的<div>、<h4>、<li>这类标签会原样显示在最终发送的消息里，不会被渲染成排版样式。

模板字面量本身完全可以用来拼接这类链接，只要把插入的内容处理成符合要求的字符串即可，不需要更换实现方式。

1. 把items构造为纯文本字符串 #

不要在内容里插入HTML标签，直接用换行符\n做排版，遍历子数组时直接返回字符串片段，最后用join('')把map返回的数组拼接成完整字符串：

const items = cart ? cart.map((p, i) => {
  // 单独处理酱料、配料两个子数组的文本拼接
  const salsaPart = p.salsa?.length ? `酱料选项：\n- ${p.salsa.join('\n- ')}\n` : ''
  const toppingPart = p.toppings?.length ? `配料选项：\n- ${p.toppings.join('\n- ')}\n` : ''
  // 拼接单个商品的文本内容
  return `${i+1}. 商品名称：${p.title}
购买数量：${p.quantity}
${salsaPart}${toppingPart}备注：${p.Comments || '无'}
`
}).join('\n') : ''

2. 对文本参数做URL编码 #

不要手动拼接%20、%0A这类转义字符，容易出现遗漏，直接用原生encodeURIComponent方法对整个消息文本做编码，避免特殊字符破坏URL结构：

const messageContent = `Thanks for your purchase ${input.name}!
${items}
Name: ${input.name}
Address: ${input.address}
Phone: ${input.Phone}
City: ${input.city}
Total: $${total}`

const link = `https://wa.me/number?text=${encodeURIComponent(messageContent)}`

• 所有放在URL查询参数里的内容都需要做URL编码，避免空格、&、=、换行这类特殊字符导致参数解析异常。
• 不要在WhatsApp消息参数里传递HTML内容，不仅不会被渲染，还可能导致链接长度超出限制无法正常跳转。

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