1. 程式人生 > >ES6系列_5之字串模版

ES6系列_5之字串模版

1.字串模板對比引入:

(1).之前我們也可以使用JavaScript輸出模版字串,通常是下面這樣的:

var restult= "姓名: <b>"+person.name+"</b>"

但是我們可以看到:這樣的傳統做法需要使用大量的“”(雙引號)和 + 來拼接才能得到我們需要的模版。但是這樣是十分不方便的。

(2)於是ES6中提供了模版字串,用`(反引號)標識,用${}將變數括起來。上面的例子可以用模版字串寫成下面這樣:

·姓名: <b>${person.name}</b>·

這樣的做法就簡潔了很多,我們不需要再使用大量的""和+來拼接字串和變數。

注意:如果使用模版字串表示多行字串,所有的空格和縮排都會被儲存在輸出中!!

console.log( `i,
love
 you.`);

輸出結果為:

2.對運算的支援:

在${}中的大括號裡可以放入任意的JavaScript表示式,還可以進行運算,以及引用物件屬性。

let a=1;
let b=2;
let result=`${a+b}`;
document.write(result);

輸出結果為3。

3.字串查詢

(1)查詢是否存在

ES6直接用includes就可以判斷,不再返回索引值。

let name="小明";
let listName
="小明,小紅,小張"; document.write(listName.includes(name))

結果返回:true

(2)判斷開頭是否存在

listName.startsWith(name)

(3)判斷結尾是否存在

listName.endsWith(name)

(4)複製字串

我們有時候是需要字串重複的,比如分隔符和特殊符號,這時候複製字串就派上用場了,語法很簡單。

document.write('*'.repeat(20));

結果為:********************。

 

未完,待續。。。。