ES6 字串模版

2021-10-02 22:26:48 字數 1800 閱讀 7184

字串模版

先來看乙個在es5下我們的字串拼接案例:

let jspang='技術胖';


let blog = '非常高興你能看到這篇文章，我是你的老朋友'+jspang+'。這節課我們學習字串模版。';


document.write(blog);
es5下必須用+jspang+這樣的形式進行拼接，這樣很麻煩而且很容易出錯。es6新增了字串模版，可以很好的解決這個問題。字串模版不再使用『***』這樣的單引號，而是換成了***這種形式，也叫連線號。這時我們再引用jspang變數就需要用$這種形式了，我們對上邊的**進行改造。

let jspang='技術胖';


let blog = `非常高興你能看到這篇文章，我是你的老朋友$。這節課我們學習字串模版。`;


document.write(blog);
可以看到瀏覽器出現了和上邊**一樣的結果。而且這裡邊支援html標籤，可以試著輸入一些。

let jspang='技術胖';


let blog = `非常高興你能看到這篇文章，我是你的老朋友$。


這節課我們學習字串模版。`;


document.write(blog);
** 對運算的支援： **

let a=1;


let b=2;


let result=`$`;


document.write(result);
強大的字串模版，在實際開發中，我們可以讓後台寫乙個活動頁面，然後輕鬆的輸出給使用者。

字串查詢

es6還增加了字串的查詢功能，而且支援中文哦，小夥伴是不是很興奮。還是拿上邊的文字作例子，進行操作。

查詢是否存在:

先來看一下es5的寫法，其實這種方法並不實用，給我們的索引位置，我們自己還要確定位置。

let jspang='技術胖';


let blog = '非常高興你能看到這篇文章，我是你的老朋友技術胖。這節課我們學習字串模版。';


document.write(blog.indexof(jspang));
這是網頁中輸出了20，我們還要自己判斷。

es6直接用includes就可以判斷，不再返回索引值，這樣的結果我們更喜歡，更直接。

let jspang='技術胖';


let blog = '非常高興你能看到這篇文章，我是你的老朋友技術胖。這節課我們學習字串模版。';


document.write(blog.includes(jspang));
*判斷開頭是否存在： *

blog.startswith(jspang);
判斷結尾是否存在：

blog.endswith(jspang);
需要注意的是：starts和ends 後邊都要加s，我開始時經常寫錯，希望小夥伴們不要採坑。

** 複製字串**

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

document.write('jspang|'.repeat(3));
當然es6對字串還有一些其它操作，因為實際工作中不太使用，這裡就不作太多的介紹了。希望你能動手練習一下，並把這些新特性應用到工作中，否則可能很快就忘記了。

ES6字串模版

es6對字串新增的操作，最重要的就是字串模版，字串模版的出現讓我們再也不用拼接變數了，而且支援在模板裡有簡單計算操作。字串模版 先來看乙個在es5下我們的字串拼接案例 let a 派俊偉 let blog 過年看珠海長隆 a 出演春晚。document.write blog es5下必須用 a 這樣...

ES 6 模版字串

es6模板字元簡直是開發者的福音啊，解決了es5在字串功能上的痛點。第乙個用途，基本的字串格式化。將表示式嵌入字串中進行拼接。用 來界定。es5 var name nwd console.log hello name es6 const name nwd console.log hello hell...

ES6字串模版以及數字操作

在es5中字串的拼接如下 let es6 es6 letstr 學習 es6 很開心 console.log str 學習es6很開心這樣拼接有些麻煩且容易產生引號巢狀問題。所以在es6中採用了新的拼接方式，如下 以反引號 包裹，變數用 包裹 let es6 es6 letstr 學習 很開心 co...