下面是在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滋味指南。
因此,模板字符串必胜!
怎么很多的方法依然重要?
了解很多的的方法也还是超级重要的。怎么怎么这么说呢?因为并不是每一个代码库都会服从这种玩法,或者你可能面对的是一个遗留代码库。作为一个研究者,我们需要能够适应和理解我们所处的所有环境。我们是来解决问题的,而不是抱怨技术有多老 除非这种抱怨是互搭实际动作来改善的。那我们就有提高