【笔记】ES6语法-模板字符串

953 阅读2分钟

模板字符串是什么?

  ES6模板字符串取代了原来的字符串拼接功能。
  原来的字符串拼接写法繁琐、容易出错且不利于代码的格式规范化,ES6字符串模板大大简化了字符串拼接。

模板字符串的特点

  ES6模板字符串支持直接换行、支持取值。

  【面试】如何自己实现类模板字符串功能?

正则实现

①我们要替换的是${}中的值,用/ /取值;

②/ /并不能直接放${},用\隔开;

③由于正则取值是贪婪的,这时取值会从name的n起一直取到最后一个大括号前sex的x才会停止, 用()限制取值范围;

④[]设置具体取值条件;

⑤return eval(arguments[1])取对应的name, age和sex;

p.s. *代表尽量多的取符合条件的值,g表示全局取值,取得的值存储于当前的arguments中。

【注意】写正则时不能为了方便查看而使用空格来将各字符隔开间隙。

带标签的模板字符串-自定义模板字符串的实现

  自定义模板字符串就是在字符串前添加一个标签,这个标签本质是一个函数。
  以下图为例,输出这个函数的arguments我们得到四个参数,其中参数一是一个数组里面包含字符串中的所有字符段,另外三个参数分别是三个替换值,所有参数拼接起来就是我们最后想要呈现的字符串。

  如下图把函数的默认返回值替换成2333再输出这个字符串str时,结果变成了2333,也就是说这个函数返回什么,输出这个字符串的结果就是什么。

  再来说说这个函数的arguments,除了第一个参数是一个数组之外其余参数都是零散的,当这样零散的参数数量多起来后我们想要获取其中的某个参数就十分不方便,为了这些零散的参数能更容易地被获取到,我们可以把它们规整到一个数组里。具体做法如下:

  整理好参数后我们可以更方便地通过对这些参数进行重组来制作自定义字符串模板,下图是一个实现批量在字符串与替换值间添加数据功能的自定义模板。

ES6字符串的常用方法

  以下前三个方法返回值是一个布尔型。之前需要实现同样的功能我们需要用indexOf()写判断。
  includes() 是否包含

let url = "www.baidu.com";
console.log(url.includes("baidu"));

  startWith 以……开头

console.log(url.startWith("http://"));

  endWith 以……结尾

console.log(url.endsWith(".com"));

  padStart, padEnd 补全
  补全的一个最典型的运用就是进制转化
  例如给计时器补零: