前言
ES6(ES2015)为 JavaScript 引入了许多新特性,其中与字符串处理相关的一个新特性——模板字面量,提供了多行字符串、字符串模板的功能,相信很多人已经在使用了。字符串模板的基本使用很简单,今天就带大家来了解了解模板字符串。
一、基本使用
1、传统字符串
传统做法需要使用大量的“”(双引号)和+来拼接才能得到我们需要的模版。但是这样是十分不方便的。并且存下一下几点缺陷:
1)传统的字符串拼接不能正常换行
2)传统的字符串拼接不能友好的插入变量
3)传统的字符串拼接不能友好的处理单引号、双引号互相嵌套的问题。
console.log('string text line 1\n' +
'string text line 2');
// "string text line 1
// string text line 2"
2、模板字符串
使用反引号(`)做标识,可以定义多行字符串,在字符串中使用${}嵌入变量。在模板字符串中的任何变量最终都会变为String类型输出。
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"
二、区别
1、拼接区别
普通拼接
var html = '<div>' +
'<img src="" alt="">' +
'<p>Today is a good day</p>' +
'</div>'
模板字符串拼接
var html = ` <div>
<img src="" alt="">
<p>Today is a good day</p>
</div>`
省了很多 ‘+’ 而且结构更加清晰,更加简单。
2、嵌套区别
普通对象嵌套
let name = "浩东"
let good = "today"
let zhd = 'Hello' + name + ',' + 'How are you' + good + '?'
console.log(zhd);
模板字符对象串嵌套
// 字符串中嵌入变量
let name = "浩东"
let good = "today"
let zhd = `Hello ${name}, How are you ${good}?`
console.log(zhd);
普通表达式嵌套
var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."
模板字符串表达式嵌套
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
可以看到Es6模板字符串的嵌套不仅更加的简单,而且逗号显示也更加的清晰。普通的嵌套更容易出错。而且模板字符串还有一个更大的优点,那就是嵌套里面还能嵌套。
模板字符串多重嵌套
const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;
//调用
const data = [
{ first: '<Jane>', last: 'Bond' },
{ first: 'Lars', last: '<Croft>' },
];
console.log(tmpl(data));
// <table>
//
// <tr><td><Jane></td></tr>
// <tr><td>Bond</td></tr>
//
// <tr><td>Lars</td></tr>
// <tr><td><Croft></td></tr>
//
// </table>
三、更多特点
1、模板字符串调用函数
<script>
function gettime() {
var myDate = new Date;
var year = myDate.getFullYear(); //获取当前年
var mon = myDate.getMonth() + 1; //获取当前月
var date = myDate.getDate(); //获取当前日
var week = myDate.getDay();
var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
return year + "年" + mon + "月" + date + "日" + weeks[week]
}
let a = `<p>${gettime()}</p>`
console.log(a);
</script>
四、封装一个模板字符串
目的
实现将字符串’我是{{name}},职业{{job}},工资{{salary}}'里的占位符用变量代替。
思想
1、定义一个模板字符串正则/{{(\w+)}}/,匹配字符串中{{}}的内容,然后通过if判断模板里是否有字符串模板。
2、如果有,那么就查找模板里的第一个模板字符串字段,并将其渲染,用相应的值替代,并通过render函数递归的渲染返回渲染后的结构。
3、如果没有,那么直接返回模板字符串。
代码
function render(template, data) {
const reg = /\{\{(\w+)\}\}/;
if (reg.test(template)) {
const name = reg.exec(template)[1];
template = template.replace(reg, data[name]);
return render(template, data);
}
return template;
}
let template = '我是{{name}},职业{{job}},工资{{salary}}';
let person = { name: '阿巴', job: '前端', salary:30000};
console.log(render(template, person)); // 我是阿巴,职业前端,工资30000