es6 模板字符串_es6 方法模板渲染

全栈程序员站长

发布于 2022-09-24 13:24:49

5940

发布于 2022-09-24 13:24:49

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

前言

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/171833.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法