JavaScript組合字串
下面是在JavaScript中組合字串的4種方法。我最喜歡的方法是使用模板字串。為什麼?因為它更具可讀性,所以沒有轉義引號的反斜槓,沒有笨拙的空格分隔符,也沒有混亂的加號運算子。 |
const icon = ''; // 模板字串 `hi ${icon}`; // join() 方法 ['hi', icon].join(' '); // Concat() 方法 ''.concat('hi ', icon); // + 運算子 'hi ' + icon; // RESULT // hi
如果你來自另一種語言(例如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}`;
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
使用 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
關於在組合字串時使用 + 運算子的一件有趣的事情。你可以用來建立新的字串,也可以透過新增現有字串來對其進行突變。
在這裡,我們使用 + 建立一個全新的字串。
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風格指南。
因此,模板字串必勝!
知道其他的方法也還是很重要的。為什麼這麼說呢?因為並不是每個程式碼庫都會遵循這個規則,或者你可能面對的是一個遺留程式碼庫。作為一個開發者,我們需要能夠適應和理解我們所處的任何環境。我們是來解決問題的,而不是抱怨技術有多老 除非這種抱怨是配合實際行動來改善的。那我們就有進步
原文地址:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31559985/viewspace-2710625/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 字串 全組合字串
- 字串排列組合問題字串
- 【劍指offer】字串的組合字串
- 無重複字串的排列組合字串
- SQL Server 如何合併組內字串SQLServer字串
- 【轉載】Python字串操作之字串分割與組合Python字串
- JavaScript計算字串位元組長度JavaScript字串
- javascript設計模式組合模式JavaScript設計模式
- Swift3.0語言教程組合字串Swift字串
- (譯) JavaScript中的組合函式JavaScript函式
- JavaScript中的繼承和組合JavaScript繼承
- JavaScript專題之函式組合JavaScript函式
- 字串處理,push pop路徑,組合命令字串
- 用JavaScript計算字串佔用位元組數JavaScript字串
- javascript設計模式 之 7組合模式JavaScript設計模式
- JavaScript - 獲取字串位元組數(函式封裝)JavaScript字串函式封裝
- javascript組合繼承的基本原理JavaScript繼承
- 征服 JavaScript 面試:什麼是函式組合JavaScript面試函式
- JavaScript隨機不重複的字元組成新的字串JavaScript隨機字元字串
- 組合語言學習記錄--輸入輸出字串組合語言字串
- JavaScript設計模式之策略模式【組合委託】JavaScript設計模式
- 【JavaScript】字串JavaScript字串
- 組合
- C# 根據KeyEventArgs與組合鍵字串相互轉換C#字串
- JavaScript數字和字母組合驗證碼詳解JavaScript
- IT組合和專案組合管理(轉)
- 【數學】組合數學 - 排列組合
- 元組和字串字串
- JavaScript 多行字串JavaScript字串
- JavaScript 字串indexOf()JavaScript字串Index
- JavaScript 字串lastIndexOf()JavaScript字串ASTIndex
- JavaScript 字串 lastIndexOf()JavaScript字串ASTIndex
- JavaScript 字串 indexOf()JavaScript字串Index
- JavaScript 字串slice()JavaScript字串
- JavaScript 字串 slice()JavaScript字串
- JavaScript 字串拼接JavaScript字串
- JavaScript 追加字串JavaScript字串
- 機器學習之特徵組合:組合獨熱向量機器學習特徵