ES6模板字符串和標(biāo)簽?zāi)０宓膽?yīng)用實(shí)例分析
本文實(shí)例講述了ES6模板字符串和標(biāo)簽?zāi)０宓膽?yīng)用。分享給大家供大家參考，具體如下：
ES6 中對(duì)字符串進(jìn)行了擴(kuò)展，而模板字符串就是一個(gè)非常實(shí)用的方式，可以在html中實(shí)現(xiàn)與變量和方法的混編
之前我們手動(dòng)拼接字符串的方式
let hello = 'Hello'; let html = '<div>' + '<span>'+ hello +'</span>' + '</div>'; console.log(html); // <div><span>Hello</span></div>
ES6中使用模板字符串來優(yōu)化了拼接的方式
let name = 'Joh';
let qq = '56655';
function log() {
return 'Hi there!';
}
let html = `
<div>
<ul>
<li>${ name === 'Joh' ? 'is Joh' : 'not Joh'}</li>
<li>${qq}</li>
<li>${log()}</li>
<ul>
</div>
`
console.log(html);
/*
// 輸出如下html:
<div>
<ul>
<li>is Joh</li>
<li>56655</li>
<li>Hi there!</li>
<ul>
</div>
*/
可以看出模板字符串優(yōu)化了之前拼接字符串的方式，更方便于編程
關(guān)于標(biāo)簽?zāi)０?/strong>
未經(jīng)處理的標(biāo)簽函數(shù)與模板字符串的結(jié)合，導(dǎo)致模板字符串失效
function tag() {
return 'tag';
}
let name = "Joh";
var res = tag`hello ${name}`;
console.log(res); // tag
標(biāo)簽函數(shù)對(duì)模板字符串進(jìn)行處理, 安全編碼的示例：
function safe(strArr) {
let res = '';
console.log(arguments);
for(var i=0, len = strArr.length; i < len; i++) {
res += strArr[i].replace(/</g, '<').replace(/>/g, '>');
if(i < arguments.length -1) {
res += arguments[i + 1];
}
}
return res;
}
let name = 'Joh';
var result = safe`<p>hello ${name}</p>`;
console.log(result); // <p>hello Joh</p>
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
JS操作字符串轉(zhuǎn)換為數(shù)值并取整的代碼
微信小程序?qū)崿F(xiàn)跟隨菜單效果和循環(huán)嵌套加載數(shù)據(jù)
JS簡(jiǎn)單獲取及顯示當(dāng)前時(shí)間的方法
ES6?Promise.all的使用方法以及其細(xì)節(jié)詳解
JS動(dòng)態(tài)添加選項(xiàng)案例分析
JS獲取今天是本月第幾周、本月共幾周、本月有多少天、是今年的第幾周、是今年的第幾天的示例代碼