前言

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 1string 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

Es6模板字符串封装与使用相关推荐

后端字段为null，前端使用ES6模板字符串进行展示
项目需求:后端字段为null,前端使用ES6模板字符串展示为空未处理前效果: // ES6的模板字符串可写表达式<template #default="{ row }"&g ...
[ 前端开发 ] ES6模板字符串
ES6模板字符串模板字符串是 ES6 的新特性,他的作用是减少了字符串的拼接操作,提高了程序的可读性接下来看一个栗子
重学ES6 模板字符串
在两三年前,jQuery还是比较主流的开发技术,当我们要为页面添加DOM时,一般,我们是这样写的 $("#container").append('Today is <b> ...
ES6模板字符串【${}配合反单引号一起用】
转自: https://www.cnblogs.com/shihuc/p/10238511.html 先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜. ...
高级JavaScript #ES6(模板字符串,let,箭头函数,forof,参数增强,解构,class,promise)
模板字符串 1.模板字符串: 只要拼接字符串都用模板字符串代替+a.整个字符串包裹在一对儿反引号 ` ` 中b.反引号``中支持换行 c.反引号中需要动态生成的内容必须放在${}里d. ${}里: ...
ES6 模板字符串 ``
参考原文链接 1. 使用JavaScript输出字符串,通常是下面这样的: console.log("He is <b>"+person.name+"< ...
ES6模板字符串的扩展
1.模板字符串的扩展 1.1传统的Jquery方法 <div class="content"></div><script>let name = ...
es6模板字符串中标签模板作为参数时产生空元素的问题
当模板字符串作为标签模板使用时,标签函数接受到的参数分别为(arr,-values) arr:模板字符串中所有那些没有变量替换的部分 -values:各个变量替换后的值即 let a = 'Oh!' ...
es6模板字符串中循环遍历数据踩坑
应该很少有这种需求,需要在模板字符串利循环遍历数据,现在框架都有自己模板语法. 我这里踩的坑是,我在模板字符串中用forEach,map遍历循环时,返回值一直是一个undefined 用for循环re ...
js es6 模板字符串和使用
模板字符串描述: 模板字符串使用反引号 (``) 来代替普通字符串中的用双引号和单引号.模板字符串可以包含特定语法(${expression})的占位符.占位符中的表达式和周围的文本会一起传递给一个默 ...

Es6模板字符串封装与使用

前言