本文介绍如何将数组中多个商品 id 和数量安全拼接为标准 url 查询参数，避免末尾多余逗号，并使用现代 javascript 方法（map + join）高效生成符合电商购物车要求的 `add-to-cart` 参数字符串。
在开发电商前端功能时，常需将用户勾选的多个商品（含 ID 与数量）一次性添加至购物车，典型做法是跳转至类似 /cart/?add-to-cart=7464:1,7465:2,7466:1 的 URL。原始代码中使用 for 循环手动拼接字符串并尝试用 if 判断去除末尾逗号，但条件 i == that.productsSelected.length 永远不成立（因循环终止条件为 i
更简洁、可靠且可读性更强的解法是利用数组原生方法 map() 与 join()：
// 将每个商品对象转换为 "id:quantity" 字符串，再用逗号连接
const cartParams = that.productsSelected
.map(item => `${item.id}:${item.quantity}`)
.join(',');
// 构造完整跳转 URL
window.location.href = `/cart/?add-to-cart=${encodeURIComponent(cartParams)}`;✅ 关键优势说明：
- map() 遍历数组并返回新字符串数组，无副作用，逻辑清晰；
- join(',') 自动处理分隔符，天然避免首尾多余符号；
- 使用 encodeURIComponent() 对参数值进行编码，防止 ID 或 quantity 中含特殊字符（如 &, =, 空格等）破坏 URL 结构；
- 无需手动维护索引或条件判断，杜绝边界错误。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 若 that.productsSelected 为空数组，join(',') 将返回空字符串，最终 URL 变为 /cart/?add-to-cart= —— 建议添加校验：
if (that.productsSelected.length === 0) { console.warn('No products selected.'); return; } - WordPress/WooCommerce 等平台对 add-to-cart 参数格式有严格要求：必须为 id:quantity 形式，多个用英文逗号分隔，不可包含空格或中文逗号；
- 避免直接拼接未编码的变量（如 id=7464&quantity=1），因 WooCommerce 标准接口仅识别 add-to-cart=id1:qty1,id2:qty2 格式。
综上，摒弃易出错的手动字符串拼接，拥抱函数式数组操作，既提升代码健壮性，也增强可维护性。
