JavaScript 代码片段：Split 与 Map

Source: Dev.to

有没有在某个地方看到过这段简短的 JavaScript 代码，却不明白它到底在做什么“魔法”？它看起来很简单，但其实暗藏了一些巧妙的技巧。下面我们一一拆解。

拆分 CSV 字符串

字符串 "1,2,3" 可能来自 CSV 文件、用户输入或 API 响应。JavaScript 把它当作一个整体的字符串，而不是三个独立的数字。

// 在每个逗号处拆分字符串
const parts = "1,2,3".split(",");
console.log(parts); // ["1", "2", "3"]

得到的是一个 字符串 数组。如果此时直接相加，你会得到 "12" 而不是 3。

使用 map(Number) 将字符串转为数字

Array.prototype.map 会遍历每个元素并执行一次转换。把内置的 Number 函数传进去，就会把每个字符串转换为数值。

// 将每个字符串转换为数字
const numbers = "1,2,3".split(",").map(Number);
console.log(numbers); // [1, 2, 3]

现在数组里是实际的数字，能够直接进行算术运算。

优雅的快捷写法

map(Number) 实际上是 map(x => Number(x)) 的简写。因为 Number 本身只接受一个参数，直接传给 map 就可以，省去几个键入，却得到同样的结果。

不使用 map(Number) 会怎样？

如果省略映射这一步，你仍然得到的是字符串数组：

const withoutMap = "1,2,3".split(",");
console.log(withoutMap); // ["1", "2", "3"]

对这些值进行算术运算会导致字符串拼接：

const withoutMap = "1,2,3".split(",");
console.log(withoutMap[0] + withoutMap[1]); // "12"（拼接）

const withMap = "1,2,3".split(",").map(Number);
console.log(withMap[0] + withMap[1]); // 3（数值相加）

没有 map(Number)，JavaScript 会把元素当作文本处理，这会导致诸如期望得到 6 却得到 "123"，或者排序错误（例如 "10" 会排在 "2" 前面）等 bug。

结论

这个模式在真实的 JavaScript 项目中随处可见：解析 CSV 数据、转换 URL 参数、处理表单输入等等。.split(",") 与 .map(Number) 的组合是一种简洁且富有表现力的方式，能够把分隔的字符串快速转化为可用的数字数组。

祝编码愉快！