纵有疾风起
人生不言弃

ES6之模板字符串的使用方法

字符串模板引擎

什么是模板字符串?
ES5中的字符串缺乏多行字符串、字符串格式化、HTML转义等特性。
而ES6通过模板字面量的方式进行了填补,模板字面量试着跳出JS已有的字符串体系,通过一些全新的方法来解决问题。

1. 基本用法

ES5字符串写法:

let message = "我的宠物狗叫拆家哈士奇,今年3岁了"console.log(message);//输出结果:我的宠物狗叫拆家哈士奇,今年3岁了

将其转化成ES6写法,其实非常简单:
只需把最外围的双引号(”)或者单引号(’) 转化成反引号(`)即可。

let message = `我的宠物狗叫拆家哈士奇,今年3岁了`console.log(message);//输出结果:我的宠物狗叫拆家哈士奇,今年3岁了

如果想在字符串内部使用反引号,只需使用反斜杠( )转义即可

let message = `我的宠物狗叫\`拆家哈士奇\`,今年3岁了`;console.log(message); // "我的宠物狗叫`拆家哈士奇`,今年3岁了"

2. 多行字符串

传统的JavaScript语言,输出模板通常是这样写的:

var name = '拆家哈士奇';var age = 3;$('#result').append(  '我的宠物狗叫 <b>' + name + '</b>\n' +      '今年\n' +      '<em>' + age+ '</em>岁,\n'+  '十分可爱!');

但是在ES6中,要获得同样效果的多行字符串,只需使用如下代码:

let name = '拆家哈士奇';let age = 3;$('#result').append(  `我的宠物狗叫 <b>${name}</b>      今年       <em>${age}</em>岁,  十分可爱!`);

对比两段拼接的代码,模板字符串使得我们不再需要反复使用双引号(或者单引号)了;而是改用反引号标识符(`),插入变量的时候也不需要再使用加号(+)了,而是把变量放入${ }即可。
也不用再通过写 \n 进行换行了,ES6 的模板字面量使多行字符串更易创建,因为它不需要特殊的语法,只需在想要的位置直接换行即可,此处的换行会同步出现在结果中。简单、清晰、明了。

注意:如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。因此需要特别留意缩进。

console.log(`我的宠物狗叫拆家哈士奇                             今年3岁了`);结果:                             //我的宠物狗叫拆家哈士奇//                             今年3岁了

以上代码中,模板字面量第二行前面的所有空白符都被视为字符串自身的一部分。

如果一定要通过适当的缩进来对齐文本,可以考虑在多行模板字面量的第一行空置并在后面的几行缩进

let html = `<div>    <h1>Title</h1></div>`.trim();

以上代码中,模板字面量的第一行没有任何文本,第二行才有内容。 HTML标签的缩进增强了可读性,之后再调用trim()方法移除了起始的空行。

3. 字符串中嵌入变量

模板字面量看上去仅仅是普通JS字符串的升级版,但二者之间真正的区别在于模板字面量的变量占位符。
ES5写法:

const age = 3;const message  = '我的宠物狗叫拆家哈士奇,今年' + age*2 + '岁了' ;//我的宠物狗叫黑子,今年6岁了

ES6写法:

const age = 3;const message  = `我的宠物狗叫拆家哈士奇,今年 ${age*2} 岁了` ;//我的宠物狗叫拆家哈士奇,今年6岁了

变量占位符允许将任何有效的JS表达式嵌入到模板字面量中,并将其结果输出为字符串的一部分。
如上面的例子,占位符 ${age} 会访问变量 age,并将其值插入到 message 字符串中。
既然占位符是JS表达式,还可以轻易嵌入运算符、函数调用等。

const age = 2;const message = `我的宠物狗叫拆家哈士奇,今年 ${(age*2).toFixed(2)} 岁了`;//"我的宠物狗叫黑子,今年 4.00 岁了"function fn() {  return "小黄";}`我朋友家的宠物叫${fn()}`//"我朋友家的宠物叫小黄"

4. 带标签的模板字符串

要用 ES6 模板实现复杂一点的字符串处理逻辑,要依赖写函数来实现。
幸运的是,除了在模板的插值表达式里想办法调用各种字符串转换的函数之外,ES6 还提供了更加优雅且更
容易复用的方案——带标签的模板字面量(tagged template literals,以下简称标签模板)
标签模板的语法很简单,就是在模板字符串的起始反撇号前加上一个标签。
let message = tag`拆家哈士奇`;
在上面的代码中,tag就是模板标签。tag其实是一个函数,这个函数会被调用来处理这个模板字符串。

4.1 定义标签

let  name = '拆家哈士奇',     age = 2,     message = tag`我的宠物狗叫${name},今年${age}岁了`;function tag(stringArr, value1, value2) {    console.log(stringArr);  //["我的宠物狗叫", ",今年", "岁了", raw: Array(3)]                             //该数组有一个raw属性,保存的是转义后的原字符串    console.log(value1);     // 拆家哈士奇    console.log(value2);     // 2    return;}标签函数通常使用不定参数特性来定义占位符,从而简化数据处理的过程function tag(stringArr, ...values) {     console.log(values); //  ["拆家哈士奇", 2]}

4.2 实际应用

“标签模板”的一个重要应用,就是过滤HTML字符串,防止用户输入恶意内容

var message =  filterHTML`<p>${sender} 你好啊</p>`;function filterHTML(templateData) {  var s = templateData[0];  for (var i = 1; i < arguments.length; i++) {    var arg = String(arguments[i]);    // 转义占位符中的特殊字符。    s += arg.replace(/&/g, "&amp;")            .replace(/</g, "&lt;")            .replace(/>/g, "&gt;");    // 不转义模板中的特殊字符。    s += templateData[i];  }  return s;}

上面代码中,sender变量往往是用户提供的,经过filterHTML函数处理,里面的特殊字符都会被转义。

var sender = '<script>alert("买了个包")</script>'; // 恶意代码var message = filterHTML`<p>${sender} 你好啊</p>`;console.log(message);// <p>&lt;script&gt;alert("买了个包")&lt;/script&gt;  你好啊</p>

即使一个恶意命名的用户,例如黑客向其他用户发送一条骚扰信息,无论如何这条信息都会被转义为普通字符串,
其他用户不会受到潜在攻击的威胁。
标签模板的另一个应用,就是多语言转换(国际化处理)

let name = 'ES6专栏 ';  let  number = 666;  let chinese = ['欢迎访问','您是第','位访问者'];i18n`Welcome to ${name}, you are the ${number}  visitor`;  function i18n(stringArr, ...values){    let str='';      stringArr.map((item,index)=>{        str += (chinese[index] +  (values[index] ? values[index] : '' ))       });    console.log(str) }

文章转载于:https://www.jianshu.com/p/a004870085ab

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » ES6之模板字符串的使用方法

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活