ES6折腾记- 模板字符串

前言

模板字符串是个好东西,请看我细细道来;

模板字符串

模板字符串[template string]是ES6引进来的,他有点类似我们平时使用的模板引擎【jade,handlebar这些】,但是又不是【功能相对鸡肋些,无法条件循环遍历什么的】,下面我来列举下它的优缺点 优点:

  • 支持变量
  • 支持多行输入

缺点:

  • 没有内建循环语法,条件语句不支持, 只可以使用模板套构的方法
  • 不能自动转义特殊的字符串。--- 需要手动转义或者写一个转义函数
  • 不能很好的和国际化库配合(即不会格式化特定语言的数字,日期,文字等)

如何使用

注意点:

  1. `` 反引号来包含内容
  2. ${}来识别储存的内容片段【占位符--支持条件表达式】
  3. 标签 + 反引号内容会触发高级函数的定义
    • tag`` --- 触发模板字符串函数定义
    • String.raw`` -- 取得字符串模板内的原始数据【原始数据就是包裹换行符\n这些,,原原本本的输出[就是输出之前进行了一次转义,转转的还是依次会保留的--切记!!!]】
//用法1: 多行字符串输出,允许内部调用模板占位符
`我是卖报的
今天又没卖出报纸
坑啊`

/*
"我是卖报的
今天又没卖出报纸
坑啊"
*/


//----------------------------------------------
//用法2:变量插入,有了这个就不用像ES5之前只能用+来拼接字符串了【据第三方测试,字符串拼接的速度比这个ES6模板字符串的快。。。ES6本来就是语法糖!!!】

var a = 2;
var b =3 ;
var c = a * 9 ;
console.log(`得到的结果值是:${a * b + c % a }*2`)
//得到的结果值是:6*2


//---------------------------------------------
//用法3:模板字符串高级运用[值位置调整,值的二次运算]
//需要先定义一个函数【arg1为字符串内容(arr-嵌套数组),arg2为变量[arr]】
//函数名+模板字符串执行,,具体如下
function test(strings,...values){
   console.log('strings是:'+strings+'\n');
   console.log('value是:'+values);
   return values[0]+strings + values[values.length-1]
}
var return_value = test`得到的结果值是:${a * b} \n,我分割,\tfasdfjl ${ c % a } *2`
//return_value的结果是:
/*
strings是:得到的结果值是:, 
,我分割,    fasdfjl , *2
value是:6,0
*/


String.raw`得到的结果值是:${a * b} \n,我分割,\tfasdfjl ${ c % a } *2`

//值为:
/*
"得到的结果值是:6 \n,我分割,\tfasdfjl 0 *2"
*/复制代码
  • 函数高级形式内,两个传入返回的均为数组;
    • 第一个参数值为嵌套数组:eg :[a,b,c,raw obj arr] : 最后一个下标值为字符串的原始数据构成的数组对象;String.raw对象是对所有字符转义一次才输出【已经手动转义的不再处理】
    • 第二个参数是变量构成的数组
    • 函数内部可以进行下标操作及其他功能操作,最后的值为return返回的值

总结

总体来说,模板字符串的出现了,让我们的字符串拼接写的更加优美了;相当简易实用;但是这货并不是万能的,有部分unicode编码字符会造成编译报错

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java社区

Python 自学步骤(文中有福利)

1624
来自专栏黑泽君的专栏

Java培训实战教程之Java基础知识精华部分(一)(二)(三)

812
来自专栏PHP实战技术

你应该这个姿势学习PHP(1)

1、addslashes addslasehes($string) 对字符串进行编译转义 应用场景:能防止sql的注入(当然并不完全是可以,我们可以使用pdo...

41410
来自专栏韩伟的专栏

框架设计原则和规范(二)

此文是《.NET:框架设计原则、规范》的读书笔记,本文内容较多,共分九章,将分4天进行推送,今天推送4-5章。 1. 什么是好的框架 2. 框架设计...

3045
来自专栏wym

18年暑假多校赛第一场 1002

http://acm.hdu.edu.cn/showproblem.php?pid=6299

861
来自专栏杨熹的专栏

Day 1-Java-imooc-2.变量常量

课程地址:http://www.imooc.com/learn/85 总结图片来自 http://www.imooc.com/article/10535 ? 本...

3605
来自专栏我的技术专栏

细说new与malloc的10点区别

1543
来自专栏java一日一条

(转)Java中的System类

System类代表系统,系统级的很多属性和控制方法都放置在该类的内部。该类位于java.lang包。

972
来自专栏用户画像

外部排序的方法

在实际应用中,由于外存设备的不同,通常又可分配磁盘文件排序和磁带文件排序两大类。磁带排序和磁盘排序的基本步骤相类似,主要的不同之处在于初始归并段在外存介质中的分...

1091
来自专栏开发与安全

C++中四种类型转换以及const_cast是否能改变常量的问题

we have four specific casting operators:dynamic_cast, reinterpret_cast, static_c...

21510

扫码关注云+社区

领取腾讯云代金券