在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風格指南。

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

爲何其餘方式仍然重要？

知道其餘的方法也仍是很重要的。爲何這麼說呢？由於並非每一個代碼庫都會遵循這個規則，或者你可能面對的是一個遺留代碼庫。做爲一個開發者，咱們須要可以適應和理解咱們所處的任何環境。咱們是來解決問題的，而不是抱怨技術有多老 😂 除非這種抱怨是配合實際行動來改善的。那咱們就有進步👏