JavaScript中怎么組合字符串

JavaScript中怎么組合字符串，相信很多沒(méi)有經(jīng)驗的人對此束手無(wú)策，為此本文總結了問(wèn)題出現的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

1. 模板字符串

如果你來(lái)自另一種語(yǔ)言(例如Ruby)，則將熟悉字符串插值一詞。這正是模板字符串要實(shí)現的目標。這是在字符串創(chuàng )建中包含表達式的一種簡(jiǎn)單方法，該方法簡(jiǎn)潔明了。

const name = 'samantha'; const country = '';

(1) 字符串連接中缺少空格的問(wèn)題

在模板字符串之前，這是我的字符串的結果

"Hi, I'm " + name + "and I'm from " + country;

?? 你發(fā)現我的錯誤了嗎?我缺少空格。在連接字符串時(shí)，這是一個(gè)非常普遍的問(wèn)題。

// Hi, I'm samanthaand I'm from

(2) 用模板字符串解決

使用模板字符串，可以解決此問(wèn)題。你可以按照你想要的字符串顯示方式編寫(xiě)。所以很容易發(fā)現是否缺了一個(gè)空格，現在超級可讀，耶!

`Hi, I'm ${name} and I'm from ${country}`;

2. join()

join 方法合并數組的元素并返回一個(gè)字符串。因為它與數組一起使用，所以如果要添加其他字符串，它非常方便。

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 的好處在于，你可以自定義組合數組元素的方式。你可以通過(guò)在其參數中傳遞分隔符來(lái)實(shí)現。

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，可以通過(guò)在字符串上調用方法來(lái)創(chuàng )建新字符串。

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 將字符串與數組組合在一起。當我傳遞數組參數時(shí)，它將自動(dòng)將數組項轉換為以逗號分隔的字符串。

const array = [instagram, twitter, tiktok];  'My handles are '.concat(array);  // My handles are @samanthaming,@samantha_ming,@samanthaming

果您希望格式更好，我們可以使用 join 來(lái)定制分隔符。

const array = [instagram, twitter, tiktok].join(', ');  'My handles are '.concat(array);  // My handles are @samanthaming, @samantha_ming, @samanthaming

4. +操作符

關(guān)于在組合字符串時(shí)使用 + 運算符的一件有趣的事情。你可以用來(lái)創(chuàng )建新的字符串，也可以通過(guò)添加現有字符串來(lái)對其進(jìn)行突變。

(1) 非可變

在這里，我們使用 + 創(chuàng )建一個(gè)全新的字符串。

const instagram = '@samanthaming'; const twitter = '@samantha_ming'; const tiktok = '@samanthaming';  const newString = 'My handles are ' + instagram + twitter + tiktok;

(2) 可變的

我們還可以使用 += 將其附加到現有字符串中。所以如果出于某種原因，你需要一種改變的方法，這可能是你的一個(gè)選擇。

let string = 'My handles are ';  string += instagram + twitter;  // My handles are samantha_ming

哦，該死的再次忘記了空格?？吹搅?連接字符串時(shí)很容易錯過(guò)空格。

string += instagram + ', ' + twitter + ', ' + tiktok; // My handles are @samanthaming, @samantha_ming, @samanthaming

感覺(jué)還是很亂的，我們把 join 扔進(jìn)去吧!

string += [instagram, twitter, tiktok].join(', '); // My handles are @samanthaming, @samantha_ming, @samanthaming

5. 字符串中的轉義字符

當字符串中包含特殊字符時(shí)，組合時(shí)首先需要轉義這些字符。讓我們看一些情況，看看如何避免它們

(1) 轉義單引號或撇號(’)

創(chuàng )建字符串時(shí)，可以使用單引號或雙引號。知道了這些知識，當你的字符串中出現單引號時(shí)，一個(gè)很簡(jiǎn)單的解決方法就是用相反的方法來(lái)創(chuàng )建字符串。

const happy = ;  ["I'm ", happy].join(' ');  ''.concat("I'm ", happy);  "I'm " + happy;  // RESULT // I'm

當然，您也可以使用反斜杠 \ 來(lái)轉義字符。但是我發(fā)現它有點(diǎn)難以閱讀，所以我并不經(jīng)常這樣。

const happy = ;  ['I\'m ', happy].join(' ');  ''.concat('I\'m ', happy);  'I\'m ' + happy;  // RESULT // I'm

由于模板字符串正在使用反引號，因此這種情況不適用于它

(2) 轉義雙引號(“)

類(lèi)似于轉義單引號，我們可以使用相同的方法來(lái)使用相反的引號。因此，為了轉義雙引號，我們將使用單引號。

const flag = '';  ['Canada "', flag, '"'].join(' ');  ''.concat('Canada "', flag, '"');  'Canada "' + flag + '"';  // RESULT // Canada ""

是的，還可以使用反斜杠轉義符。

(3) 轉義符(`)

因為模板字符串使用反引號創(chuàng )建其字符串，所以當要輸出該字符時(shí)，我們必須使用反斜杠對其進(jìn)行轉義。