JavaScript組合字串

安全劍客發表於2020-08-10
下面是在JavaScript中組合字串的4種方法。我最喜歡的方法是使用模板字串。為什麼?因為它更具可讀性,所以沒有轉義引號的反斜槓,沒有笨拙的空格分隔符,也沒有混亂的加號運算子。

JavaScript組合字串JavaScript組合字串

const icon = ''; 
 
// 模板字串 
`hi ${icon}`; 
 
// join() 方法 
['hi', icon].join(' '); 
 
// Concat() 方法 
''.concat('hi ', icon); 
 
// + 運算子 
'hi ' + icon; 
 
// RESULT 
// hi
1. 模板字串

如果你來自另一種語言(例如Ruby),則將熟悉字串插值一詞。這正是模板字串要實現的目標。這是在字串建立中包含表示式的一種簡單方法,該方法簡潔明瞭。

const name = 'samantha'; 
const country = '';
(1) 字串連線中缺少空格的問題

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

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

☝️ 你發現我的錯誤了嗎?我缺少空格。在連線字串時,這是一個非常普遍的問題。

// Hi, I'm samanthaand I'm from
(2) 用模板字串解決

使用模板字串,可以解決此問題。你可以按照你想要的字串顯示方式編寫。所以很容易發現是否缺了一個空格,現在超級可讀,耶!

`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. +運算子

關於在組合字串時使用 + 運算子的一件有趣的事情。你可以用來建立新的字串,也可以透過新增現有字串來對其進行突變。

(1) 非可變

在這裡,我們使用 + 建立一個全新的字串。

const instagram = '@samanthaming'; 
const twitter = '@samantha_ming'; 
const tiktok = '@samanthaming'; 
 
const newString = 'My handles are ' + instagram + twitter + tiktok;
(2) 可變的

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

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
5. 字串中的跳脫字元

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

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

建立字串時,可以使用單引號或雙引號。知道了這些知識,當你的字串中出現單引號時,一個很簡單的解決方法就是用相反的方法來建立字串。

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

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

(2) 轉義雙引號(“)

類似於轉義單引號,我們可以使用相同的方法來使用相反的引號。因此,為了轉義雙引號,我們將使用單引號。

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

是的,還可以使用反斜槓轉義符。

(3) 轉義符(`)

因為模板字串使用反引號建立其字串,所以當要輸出該字元時,我們必須使用反斜槓對其進行轉義。

6. 使用哪種方式?

我展示了一些使用不同方式連線字串的示例。哪種方法更好取決於所有情況。關於樣式偏好,我喜歡遵循Airbnb風格指南。

因此,模板字串必勝!

7. 為什麼其他方式仍然重要?

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

原文地址:

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31559985/viewspace-2710625/,如需轉載,請註明出處,否則將追究法律責任。

相關文章