ES6模板字符串【${}配合反單引號一起用】


先看看JavaScript中兩個字符串的效果,就很容易知道模板字符串是個啥東西,其實一點也不新鮮。高級編程中,例如java里面的string.format就是干這個事情,諸如此類。

1. 概念理解

A.老式做法

var ohello='good good day, day day good'
var oworld='please look ' + '"' + ohello + '"' + ', cool style, please enjoy it'
console.info(oworld)

B.新式做法

var hello='good good day, day day good'
var world=`please look "${hello}", cool style, please enjoy it`
console.info(world)

是不是新式做法簡單了很多,這種表達方式是ES6提出的模板字符串方式。

模板字符串(template string)是增強版的字符串,用反引號(`)標識。它可以當作普通字符串使用,也可以用來定義多行字符串,或者在字符串中嵌入變量。變量的獲取方式是${varName},使得字符串模板定義簡單化。

 

2. 模板字符串中有沒有變量不是剛需

var str1 = `hello world`
console.log(str1)

字符串模板方便了將變量的值嵌入到模板字符串中

 

3. 如果使用模版字符串輸出多行字符串,所有的空格和縮進都會被保存在輸出中!!

console.log(`No matter\` what you do,

I trust you.
                               。。。。
呵呵`)

 

4. 在${}中的大括號里可以放入任意的JavaScript表達式,及引用對象屬性(類似Spring SpEL表達式),還可以進行運算。

var x=100;
var y=123;
console.log(`x=${x++},y=${x+y}`);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM