您好,登錄后才能下訂單哦!
小編給大家分享一下es6模板字符串的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
具體如下
作為前端開發者避免不了根據后臺數據的返回,組裝html,渲染頁面。舉個栗子
$('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale!' );
有時候還要給標簽加一些屬性,寫起來很不方便,es6提供了模板字符串的方法,簡化了這一過程
$('#result').append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale! `);
所有模板字符串的空格和換行,都是被保留的,如果你不想要前后換行,可以使用trim方法消除它。
在{}你可以寫任意JavaScript表達式,包括調用函數
var x = 1; var y = 2; `${x} + ${y} = ${x + y}` // "1 + 2 = 3" `${x} + ${y * 2} = ${x + y * 2}` // "1 + 4 = 5" var obj = {x: 1, y: 2}; `${obj.x + obj.y}` // "3" function fn() { return "Hello World"; } `foo ${fn()} bar` // foo Hello World bar
如果變量沒有聲明,會報錯,如果{}中是一個字符串,則原樣返回
// 變量place沒有聲明 var msg = `Hello, ${place}`; // 報錯 `Hello ${'World'}` // "Hello World"
以上是“es6模板字符串的示例分析”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。