Es6模板字符串封装与使用

前言

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