关于es6:ES6模板字符串

传统的字符串模板
在传统的 Javascript 中，如果咱们对 DOM 进行操作，字符串模板通常采纳加号 (+) 进行字符串拼接。

ES6 模板字符串
反引号 (`) 示意一般的字符串，也能够示意多行字符串(随便换行)，同时还能够插入变量（代替传统的加号拼接）。

模板字符串应用反引号 (“) 来代替一般字符串中的用双引号和单引号。
模板字符串能够蕴含特定语法（${expression}）的占位符。占位符中的表达式和四周的文本会一起传递给一个默认函数，该函数负责将所有的局部连接起来。

如果一个模板字符串由表达式结尾，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串解决后被调用，在输入最终后果前，你都能够通过该函数来对模板字符串进行操作解决。在模版字符串内应用反引号（`）时，须要在它后面加本义符（\）。

留神：模板字符串中的换行和空格会被保留，并且如果模板字符串中的变量没有申明，将报错。

后续，咱们所有实例都采纳比照传统的字符串进行演示。

// 传统字符串拼接
var str1 = "我是：";
var str2 = "学生";
window.alert(str1 + "一名" + str2);// 我是：一名学生

// ES6 模板字符串拼接
var str1 = "我是：";
var str2 = "学生";
window.alert(`${str1}一名 ${str2}`);// 我是：一名学生

能够看到，模板字符串拼接更加简洁直观。

你也能够轻松取得多行字符串：

// 传统写法
var str1 = "我是：";
var str2 = "学生";
console.log(str1+'\n'+str2);
/*
我是：学生
*/

// ES6 模板字符串写法
var str1 = "我是：";
var str2 = "学生";
console.log(`${str1}
${str2}`);
/*
我是：学生
*/

在新行中插入的任何字符都是模板字符串中的一部分。

如果大括号外部是一个字符串，将会原样输入：

console.log(`hello ${'ES6'} !`)
// hello ES6 !

插入表达式

在一般字符串中嵌入表达式(任意表达式或对象属性等)，传统办法略显臃肿，字符串模板更优雅。

// 传统写法
var n1 = 10;
var n2 = 20;
console.log("n1+n2="+(n1+n2));//n1+n2=30

// ES6 模板字符串写法
var n1 = 10;
var n2 = 20;
console.log(`n1+n2=${n1+n2}`);//n1+n2=30

能够看到，不仅层次分明，还有较强的直观性。

模板字符串嵌套

模板字符串还能够进行嵌套应用。

const data = `
    ·1·
`;
//     ·1·

如果须要援用模板字符串自身，在须要时执行，能够写成函数：

let data = (str) => `____${str}`;
console.log(data('123'));
// ____123

模板字符串调用函数

同样，模板字符串反对调用函数，${函数名}即可。

// 定义一个函数
function demo(){return `Hello ES6!`}
// 调用 demo()
window.alert(` 我要调用 demo()：${demo()}`);
// 我要调用 demo()：Hello ES6!

带标签的模板字符串

更高级的模式的模板字符串是带标签 (tag) 的模板字符串。标签使您能够用函数解析模板字符串。标签函数的第一个参数蕴含一个字符串值的数组。其余的参数与表达式相干。
最初，你的函数能够返回解决好的的字符串（或者它能够返回齐全不同的货色）用于该标签的函数的名称能够被命名为任何名字。

说白了，就是通过一个默认的函数对其中的插值进行运算和连贯，加在模板字符串后面加一个标签（函数），字符串输入前会主动调用该函数进行运算解决后，而后再输入进去。就像 vue、react 等框架中过滤器大同小异。

// 标签函数(array,n1,n2)
// array 是字符串的字面量的一个数组
// n1/n2：一个表达式的计算结果

// 变量
var name = '小李';
var age = 102;

// 标签函数
function new_fun(strings, n1,n2) {// 数组(不了解前面有图示)
  var str0 = strings[0]; // 我是
  var str1 = strings[1]; // 往年
  var n1 = `*`; // *
  var n2 = `|`;// |

  // 最终都须要 return 返回(否则报错)
  return str0 + n1 + str1 + n2 + `~~ 我是尾巴 `;// 程序扭转则输入扭转

}

// 调用标签函数(new_fun)
var output = new_fun` 我是 ${name} 往年 ${age}`;

// 输入打印
console.log(output); // 我是 * 往年 |~~ 我是尾巴

留神：最终都由 return 返回，否则报错。

关于es6:ES6模板字符串

前言

简介

根本用法