深入淺出es6模板字符串
更新時(shí)間：2017年08月26日 10:44:54 作者：Funwt
這篇文章主要介紹了深入淺出es6模板字符串,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文主要介紹了深入淺出es6模板字符串，分享給大家，具體如下
作為前端開發(fā)者避免不了根據(jù)后臺(tái)數(shù)據(jù)的返回，組裝html，渲染頁(yè)面。舉個(gè)栗子
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
有時(shí)候還要給標(biāo)簽加一些屬性，寫起來(lái)很不方便，es6提供了模板字符串的方法，簡(jiǎn)化了這一過(guò)程
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
所有模板字符串的空格和換行，都是被保留的，如果你不想要前后換行，可以使用trim方法消除它。
在{}你可以寫任意JavaScript表達(dá)式，包括調(diào)用函數(shù)
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
如果變量沒(méi)有聲明，會(huì)報(bào)錯(cuò)，如果{}中是一個(gè)字符串，則原樣返回
// 變量place沒(méi)有聲明
var msg = `Hello, ${place}`;
// 報(bào)錯(cuò)
`Hello ${'World'}`
// "Hello World"
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)斐波那契數(shù)列的五種方式(小結(jié))
這篇文章主要介紹了JS實(shí)現(xiàn)斐波那契數(shù)列的五種方式(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
再談javascript 動(dòng)態(tài)添加樣式規(guī)則 W3C校檢
Ruby's Louvre blog都是一些精品內(nèi)容，下面這個(gè)是介紹javascript 動(dòng)態(tài)添加樣式規(guī)則，而且最后的函數(shù)，可以讓你的css通過(guò)w3c的驗(yàn)證。2009-12-12
最近使用echarts做的一個(gè)H5的成績(jī)數(shù)據(jù)報(bào)告,里面使用了雷達(dá)圖已經(jīng)折線圖和柱狀圖,下面這篇文章主要給大家介紹了關(guān)于如何利用echarts畫雷達(dá)圖和折柱混合的相關(guān)資料,需要的朋友可以參考下2022-04-04
JavaScript 獲取瀏覽器的類型和頁(yè)面編碼的函數(shù)代碼。2010-06-06
說(shuō)到 javascript 中的定時(shí)器，我們肯定會(huì)想到 setTimeout() 和 setInterval() 這兩個(gè)函數(shù)。本文將從 事件循環(huán)（Event Loop） 的角度來(lái)分析兩者的工作原理和區(qū)別2016-12-12
用表格輸出1-1000之間的數(shù)字實(shí)現(xiàn)代碼(附特效)
本文將介紹下用表格輸出1-1000之間的數(shù)字同時(shí)附有特效，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-04
js實(shí)現(xiàn)同一頁(yè)面可多次調(diào)用的圖片幻燈切換效果
這篇文章主要介紹了js實(shí)現(xiàn)同一頁(yè)面可多次調(diào)用的圖片幻燈切換效果,可實(shí)現(xiàn)在同一頁(yè)面中多次調(diào)用幻燈切換效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JS擴(kuò)展方法,實(shí)例分析了javascript擴(kuò)展方法的原理與各種常用的擴(kuò)展應(yīng)用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
Bootstrap，來(lái)自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹Bootstrap表單與圖片的相關(guān)資料,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了ES6新特性之Object的變化,結(jié)合具體實(shí)例形式分析了ES6中Object對(duì)象定義與使用方法的變化,需要的朋友可以參考下2017-03-03