正文

js以逗号分割字符串（js分割字符串的方法）

百科
百科 V管理员 /4 阅读
1021

下面是在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风格攻略。

因而，模板字符串必胜！

为什么其他办法依然重要？

知道其他的办法也仍是很重要的。为什么这么说呢？由于并不是每个代码库都会遵从这个规矩，或许你或许面临的是一个留传代码库。作为一个开发者，咱们需求可以适应和了解咱们所在的任何环境。咱们是来处理问题的，而不是诉苦技能有多老 除非这种诉苦是合作实际行动来改进的。那咱们就有前进

-- 展开阅读全文 --