溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

es6模板字符串

發(fā)布時(shí)間：2020-03-29 03:37:51 來(lái)源：網(wǎng)絡(luò) 閱讀：279 作者：mp624183768 欄目：web開(kāi)發(fā) 

var arr = [1,2,3];
`xxx ${arr} xxx`//xxx 1,2,3 xxx
字符串拼接是開(kāi)發(fā)時(shí)一個(gè)必不可少的環(huán)節(jié)，也是很惡心的一個(gè)環(huán)節(jié)，尤其是又臭又長(zhǎng)的html字符串拼接。

為什么說(shuō)html字符串拼接很惡心呢，主要有以下幾點(diǎn)：

  1. 傳統(tǒng)的字符串拼接不能正常換行
  2. 傳統(tǒng)的字符串拼接不能友好的插入變量
  3. 傳統(tǒng)的字符串拼接不能友好的處理單引號(hào)、雙引號(hào)互相嵌套的問(wèn)題。

es6的模板字符串解決了以上問(wèn)題
es6 使用``(windows鍵盤(pán)英文輸入法下tab鍵上面那個(gè)鍵)來(lái)定義一個(gè)字符串。

var s = `hello world`
我們通常這樣拼接html字符串。
var html = '<ul>'+
'<li>1</li>'+
'<li>2</li>'+
'</ul>'
如果html標(biāo)簽里面有其他的引號(hào)，那就更惡心了，但是，使用es6，只需要這要就ok了。
var html = `<ul>
<li>1</li>
<li>2</li>
</ul>`

在windows鍵盤(pán)上，``是英文輸入法下tab按鍵上面那個(gè)鍵。

它同樣支持變量的嵌套，甚至功能更加強(qiáng)大


{}里面可以插入任何js表達(dá)式，還可以是一個(gè)對(duì)象、數(shù)組，甚至是一個(gè)函數(shù)。
對(duì)象或者數(shù)組會(huì)調(diào)用它們的toString()方法
var obj = {a:1,b:2};
`xxx ${obj} xxx`//xxx [object Object] xxx

var s1 = `hello vue`;
`xxx ${s1} xxx` //xxx hello vue xxx
函數(shù)分兩種情況：
  1. 函數(shù)本身，同樣會(huì)調(diào)用它的tostring()方法

  2. 直接調(diào)用函數(shù)，則輸出函數(shù)的返回值
var fn1 = function(){
console.log('hello vuex');
}
var fn2 = function(){
return 'hello vue-router'
}
`xxx ${fn1}`//xxx function fn(){....}
`xxx ${fn1()}`//xxx underfind
`xxx ${fn2()}`//xxx hello vue-router
如果{}里面的變量是個(gè)不存在的變量呢？
es6模板字符串


													            

            
向AI問(wèn)一下細(xì)節(jié)

            
            

            

                
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

                
                
            

            
            
        

        
    




AI
助
手