日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
在JavaScript中組合字符串的4種方法

下面是在JavaScript中組合字符串的4種方法。我最喜歡的方法是使用模板字符串。為什么?因?yàn)樗呖勺x性，所以沒有轉(zhuǎn)義引號(hào)的反斜杠，沒有笨拙的空格分隔符，也沒有混亂的加號(hào)操作符 。

創(chuàng)新互聯(lián)憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗(yàn)，為客戶提供超值的營銷型網(wǎng)站建設(shè)服務(wù)，我們始終認(rèn)為：好的營銷型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個(gè)人等客戶提供了網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)服務(wù)，以良好的商業(yè)信譽(yù)，完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。

 
 
 
    
  
  
  
  1. const icon = ''; 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. // 模板字符串 
    4. 
  
  
  
  4. `hi ${icon}`; 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. // join() 方法 
    7. 
  
  
  
  7. ['hi', icon].join(' '); 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. // Concat() 方法 
    10. 
  
  
  
  10. ''.concat('hi ', icon); 
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12. // + 操作符 
    13. 
  
  
  
  13. 'hi ' + icon; 
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15. // RESULT 
    16. 
  
  
  
  16. // hi  
    17.

1. 模板字符串

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

 
 
 
    
  
  
  
  1. const name = 'samantha'; 
    2. 
  
  
  
  2. const country = ''; 
    3.

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

在模板字符串之前，這是我的字符串的結(jié)果

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

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

 
 
 
    
  
  
  
  1. // Hi, I'm samanthaand I'm from  
    2.

(2) 用模板字符串解決

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

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

2. join()

join 方法合并數(shù)組的元素并返回一個(gè)字符串。因?yàn)樗c數(shù)組一起使用，所以如果要添加其他字符串，它非常方便。

 
 
 
    
  
  
  
  1. const instagram = '@samanthaming'; 
    2. 
  
  
  
  2. const twitter = '@samantha_ming'; 
    3. 
  
  
  
  3. const array = ['My handles are ', instagram, twitter]; 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. const tiktok = '@samantaming'; 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. array.push(tiktok); 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. array.join(' '); 
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11. // My handles are @samanthaming @samantha_ming @samanthaming 
    12.

自定義分隔符

join 的好處在于，你可以自定義組合數(shù)組元素的方式。你可以通過在其參數(shù)中傳遞分隔符來實(shí)現(xiàn)。

 
 
 
    
  
  
  
  1. const array = ['My handles are ']; 
    2. 
  
  
  
  2. const handles = [instagram, twitter, tiktok].join(', ');  
    3. 
  
  
  
  3. // @samanthaming, @samantha_ming, @samanthaming 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. array.push(handles); 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. array.join(''); 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. // My handles are @samanthaming, @samantha_ming, @samanthaming 
    10.

3. concat()

使用 concat，可以通過在字符串上調(diào)用方法來創(chuàng)建新字符串。

 
 
 
    
  
  
  
  1. const instagram = '@samanthaming'; 
    2. 
  
  
  
  2. const twitter = '@samantha_ming'; 
    3. 
  
  
  
  3. const tiktok = '@samanthaming'; 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. 'My handles are '.concat(instagram, ', ', twitter', ', tiktok); 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. // My handles are @samanthaming, @samantha_ming, @samanthaming 
    8.

結(jié)合字符串和數(shù)組

還可以使用 concat 將字符串與數(shù)組組合在一起。當(dāng)我傳遞數(shù)組參數(shù)時(shí)，它將自動(dòng)將數(shù)組項(xiàng)轉(zhuǎn)換為以逗號(hào)分隔的字符串。

 
 
 
    
  
  
  
  1. const array = [instagram, twitter, tiktok]; 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. 'My handles are '.concat(array); 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. // My handles are @samanthaming,@samantha_ming,@samanthaming 
    6.

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

 
 
 
    
  
  
  
  1. const array = [instagram, twitter, tiktok].join(', '); 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. 'My handles are '.concat(array); 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. // My handles are @samanthaming, @samantha_ming, @samanthaming 
    6.

4. +操作符

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

(1) 非可變

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

 
 
 
    
  
  
  
  1. const instagram = '@samanthaming'; 
    2. 
  
  
  
  2. const twitter = '@samantha_ming'; 
    3. 
  
  
  
  3. const tiktok = '@samanthaming'; 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. const newString = 'My handles are ' + instagram + twitter + tiktok; 
    6.

(2) 可變的

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

 
 
 
    
  
  
  
  1. let string = 'My handles are '; 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. string += instagram + twitter; 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. // My handles are @samanthaming@samantha_ming 
    6.

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

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

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

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

5. 字符串中的轉(zhuǎn)義字符

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

(1) 轉(zhuǎn)義單引號(hào)或撇號(hào)(’)

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

 
 
 
    
  
  
  
  1. const happy = ; 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. ["I'm ", happy].join(' '); 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. ''.concat("I'm ", happy); 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. "I'm " + happy; 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. // RESULT 
    10. 
  
  
  
  10. // I'm  
    11.

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

 
 
 
    
  
  
  
  1. const happy = ; 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. ['I\'m ', happy].join(' '); 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. ''.concat('I\'m ', happy); 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. 'I\'m ' + happy; 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. // RESULT 
    10. 
  
  
  
  10. // I'm  
    11.

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

(2) 轉(zhuǎn)義雙引號(hào)(“)

類似于轉(zhuǎn)義單引號(hào)，我們可以使用相同的方法來使用相反的引號(hào)。因此，為了轉(zhuǎn)義雙引號(hào)，我們將使用單引號(hào)。

 
 
 
    
  
  
  
  1. const flag = ''; 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. ['Canada "', flag, '"'].join(' '); 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. ''.concat('Canada "', flag, '"'); 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. 'Canada "' + flag + '"'; 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. // RESULT 
    10. 
  
  
  
  10. // Canada "" 
    11.

是的，還可以使用反斜杠轉(zhuǎn)義符。

(3) 轉(zhuǎn)義符(`)

因?yàn)槟０遄址褂梅匆?hào)創(chuàng)建其字符串，所以當(dāng)要輸出該字符時(shí)，我們必須使用反斜杠對(duì)其進(jìn)行轉(zhuǎn)義。

6. 使用哪種方式?

我展示了一些使用不同方式連接字符串的示例。哪種方法更好取決于所有情況。關(guān)于樣式偏好，我喜歡遵循Airbnb風(fēng)格指南。

因此，模板字符串必勝!

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

知道其他的方法也還是很重要的。為什么這么說呢?因?yàn)椴⒉皇敲總€(gè)代碼庫都會(huì)遵循這個(gè)規(guī)則，或者你可能面對(duì)的是一個(gè)遺留代碼庫。作為一個(gè)開發(fā)者，我們需要能夠適應(yīng)和理解我們所處的任何環(huán)境。我們是來解決問題的，而不是抱怨技術(shù)有多老 除非這種抱怨是配合實(shí)際行動(dòng)來改善的。那我們就有進(jìn)步


當(dāng)前文章：在JavaScript中組合字符串的4種方法
轉(zhuǎn)載源于：http://www.dlmjj.cn/article/coeddid.html