在JavaScript中组合字符串的4种方法

来源：公众号《前端全栈开发者》(ID:by-zhangbing-dev)

下面是在JavaScript中组合字符串的4种方法。我最喜欢的方法是使用模板字符串。为何？由于它更具可读性，因此没有转义引号的反斜杠，没有笨拙的空格分隔符，也没有混乱的加号操做符 👏。

const icon = '👋';

// 模板字符串
`hi ${icon}`;

// join() 方法
['hi', icon].join(' ');

// Concat() 方法
''.concat('hi ', icon);

// + 操做符
'hi ' + icon;

// RESULT
// hi 👋

1. 模板字符串

若是你来自另外一种语言（例如Ruby），则将熟悉字符串插值一词。这正是模板字符串要实现的目标。这是在字符串建立中包含表达式的一种简单方法，该方法简洁明了。

const name = 'samantha';
const country = '🇨🇦';

字符串链接中缺乏空格的问题

在模板字符串以前，这是个人字符串的结果 😫

"Hi, I'm " + name + "and I'm from " + country;

☝️ 你发现个人错误了吗？我缺乏空格😫。在链接字符串时，这是一个很是广泛的问题。

// Hi, I'm samanthaand I'm from 🇨🇦

用模板字符串解决

使用模板字符串，能够解决此问题。你能够按照你想要的字符串显示方式编写。因此很容易发现是否缺了一个空格，如今超级可读，耶！

`Hi, I'm ${name} and I'm from ${country}`;

2. join()

join 方法合并数组的元素并返回一个字符串。由于它与数组一块儿使用，因此若是要添加其余字符串，它很是方便。

const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const array = ['My handles are ', instagram, twitter];

const tiktok = '@samantaming';

array.push(tiktok);

array.join(' ');

// My handles are @samanthaming @samantha_ming @samanthaming

自定义分隔符

join 的好处在于，你能够自定义组合数组元素的方式。你能够经过在其参数中传递分隔符来实现。

const array = ['My handles are '];
const handles = [instagram, twitter, tiktok].join(', '); 
// @samanthaming, @samantha_ming, @samanthaming

array.push(handles);

array.join('');

// My handles are @samanthaming, @samantha_ming, @samanthaming

3. concat()

使用 concat，能够经过在字符串上调用方法来建立新字符串。

const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const tiktok = '@samanthaming';

'My handles are '.concat(instagram, ', ', twitter', ', tiktok);

// My handles are @samanthaming, @samantha_ming, @samanthaming

结合字符串和数组

还可使用 concat 将字符串与数组组合在一块儿。当我传递数组参数时，它将自动将数组项转换为以逗号分隔的字符串。

const array = [instagram, twitter, tiktok];

'My handles are '.concat(array);

// My handles are @samanthaming,@samantha_ming,@samanthaming

果您但愿格式更好，咱们可使用 join 来定制分隔符。

const array = [instagram, twitter, tiktok].join(', ');

'My handles are '.concat(array);

// My handles are @samanthaming, @samantha_ming, @samanthaming

4. +操做符

关于在组合字符串时使用 + 运算符的一件有趣的事情。你能够用来建立新的字符串，也能够经过添加现有字符串来对其进行突变。

非可变

在这里，咱们使用 + 建立一个全新的字符串。

const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const tiktok = '@samanthaming';

const newString = 'My handles are ' + instagram + twitter + tiktok;

可变的

咱们还可使用 += 将其附加到现有字符串中。因此若是出于某种缘由，你须要一种改变的方法，这多是你的一个选择。

let string = 'My handles are ';

string += instagram + twitter;

// My handles are @samanthaming@samantha_ming

哦，该死的😱再次忘记了空格。看到了！链接字符串时很容易错过空格。

string += instagram + ', ' + twitter + ', ' + tiktok;
// My handles are @samanthaming, @samantha_ming, @samanthaming

感受仍是很乱的，咱们把 join 扔进去吧！

string += [instagram, twitter, tiktok].join(', ');
// My handles are @samanthaming, @samantha_ming, @samanthaming

字符串中的转义字符

当字符串中包含特殊字符时，组合时首先须要转义这些字符。让咱们看一些状况，看看如何避免它们💪

转义单引号或撇号（’）

建立字符串时，可使用单引号或双引号。知道了这些知识，当你的字符串中出现单引号时，一个很简单的解决方法就是用相反的方法来建立字符串。

const happy = 🙂;

["I'm ", happy].join(' ');

''.concat("I'm ", happy);

"I'm " + happy;

// RESULT
// I'm 🙂

固然，您也可使用反斜杠 \ 来转义字符。可是我发现它有点难以阅读，因此我并不常常这样。

const happy = 🙂;

['I\'m ', happy].join(' ');

''.concat('I\'m ', happy);

'I\'m ' + happy;

// RESULT
// I'm 🙂

因为模板字符串正在使用反引号，所以这种状况不适用于它 👍

转义双引号（“）

相似于转义单引号，咱们可使用相同的方法来使用相反的引号。所以，为了转义双引号，咱们将使用单引号。

const flag = '🇨🇦';

['Canada "', flag, '"'].join(' ');

''.concat('Canada "', flag, '"');

'Canada "' + flag + '"';

// RESULT
// Canada "🇨🇦"

是的，还可使用反斜杠转义符。

转义符（`）

由于模板字符串使用反引号建立其字符串，因此当要输出该字符时，咱们必须使用反斜杠对其进行转义。

使用哪一种方式？

我展现了一些使用不一样方式链接字符串的示例。哪一种方法更好取决于全部状况。关于样式偏好，我喜欢遵循Airbnb风格指南。

所以，模板字符串必胜！ 👑

为何其余方式仍然重要？

知道其余的方法也仍是很重要的。为何这么说呢？由于并非每一个代码库都会遵循这个规则，或者你可能面对的是一个遗留代码库。做为一个开发者，咱们须要可以适应和理解咱们所处的任何环境。咱们是来解决问题的，而不是抱怨技术有多老 😂 除非这种抱怨是配合实际行动来改善的。那咱们就有进步👏