1200字范文 > 中单引号怎么转义_在JavaScript中组合字符串的4种方法

中单引号怎么转义_在JavaScript中组合字符串的4种方法

时间：2020-07-11 18:37:25

下面是在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, @samanthamingarray.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