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

因此，模板字符串必勝！

為什麼其他方式仍然重要？

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