关于前端:在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 格调指南。

因而，模板字符串必胜！????

为什么其余形式依然重要？

晓得其余的办法也还是很重要的。为什么这么说呢？因为并不是每个代码库都会遵循这个规定，或者你可能面对的是一个遗留代码库。作为一个开发者，咱们须要可能适应和了解咱们所处的任何环境。咱们是来解决问题的，而不是埋怨技术有多老 ???? 除非这种埋怨是配合实际行动来改善的。那咱们就有提高????