JavaScript拼接字符串3种方法

发表于 分类于 阅读次数： Valine：

原文：3 Ways to Concatenate Strings in JavaScript

JavaScript中可以用+运算符、Array#join()函数和String#concat()函数拼接字符串。本文介绍了一些需要了解的知识。

JavaScript有三种方法可以拼接字符串。本文讲解了这三种方法以及其中的差异。

+ 运算符

用于两个数值加和的运算符+，也能用于拼接两个字符串。

1
2
const str = 'Hello' + ' ' + 'World';
str; // 'Hello World'

也可以用+=，a += b相当于a = a + b的简写。

1
2
3
4
let str = 'Hello';
str += ' ';
str += 'World';
str; // 'Hello World'

如果运算符+左侧是字符串，JavaScript会将右侧的强制转换为字符串。也就是说字符串拼接对象、数值、null或undefined都是没问题的。

1
2
3
4
5
6
7
8
9
10
let str = 'Values: ';
str += 42;
str += ' ';

str += {};
str += ' ';

str += null;

str; // 'Values: 42 [object Object] null'

运算符+和+=在现代的JavaScript引擎中是很快的，不必担心类似Java的StringBuilder类的问题。

Array#join()

Array#join()函数将数组中所有元素拼接起来，生成一个新字符串，例如：

1
['Hello', ' ', 'World'].join(''); // 'Hello World'

join()的第一个参数是分隔符，默认的分隔符是逗号','。

1
['a', 'b', 'c'].join(); // 'a,b,c'

可以使用任何字符作为分隔符。分隔符的存在，让Array#join()在重复拼接相同字符时更方便，例如，用空格' '组为分隔符拼接单词数组：

1
2
// 'Twas the night before Christmas'
['Twas', 'the', 'night', 'before', 'Christmas'].join(' ');

也可以使用'/'拼接URL片段：

1
2
// 'masteringjs.io/tutorials/fundamentals/string-concat'
['masteringjs.io', 'tutorials', 'fundamentals', 'string-concat'].join('/');

Array#join()的操作符，使得这种拼接字符串的方法非常灵活。如果需要拼接的字符串数量不确定，应该使用join()，而不是for循环嵌套+。

String#concat()

JavaScript的字符串有内置的concat()方法。concat()函数接收一个或多个参数，返回修改的字符串。JavaScript的字符串是不可变的，所以concat()不会修改原字符串。

1
2
3
4
5
6
7
const str1 = 'Hello';
const str2 = str1.concat(' ', 'World');

// 'Hello'. 字符串是不可变的, 所以 `concat()` 不会修改 `str1`
str1;
// 'Hello World'
str2;

concat()的缺点是str1必须是字符串。如果str == null会抛出TypeError，但可以向concat()传入非字符串参数。

1
2
3
4
5
// 如果 `str` 是 null 或其他非字符串, 不能使用 `concat()`
const str = 'Values: ';

// 'Values: 42 null'
str.concat(42, ' ', null);

concat()函数很少使用，因为它比运算符+有更多的异常场景。例如，调用concat()的变量恰巧是一个数组，可能会发生一些超出预期的行为。除非有充分的理由，否则应该用+替代concat()。

如果必须使用concat()，最好用空字符串调用：

1
''.concat('Hello', ' ', 'World');