ES6:模板字符串的简单使用
本来是个后端工程师,因为最近要做开源项目,还不会前端 TnT ,没办法只能一步步学啦。前端知识知之甚微,基本小白一个。em...顺便吐槽下自己也要往full stack的方向前进了。
好多东西不会,在这里记录下。
一、模板字符串简单介绍
ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings)。我们可以使用反撇号字符 ` 代替普通字符串的引号 ' 或 " ,在这种用法上,他们与一般的普通字符串的引号 ' 或 " 没有什么大的区别。但是它有一些更加便捷的应用法。
二、用法简单介绍
1、基本使用
// 普通字符串
`I am Evan.`// 多行字符串
`I like programming
and play football.`// 字符串中嵌入变量
var name = "Evan", time = "today";
`Hello ${name}, What are you doing ${time}?` // Hello Evan, what are you doing today?
上面代码中,模板字符串都是用反引号表示,如果在模板字符串中需要使用反引号,则前面需要用反斜杠转义。
var brand = `The brand is \`Gucci\`!`; // The brand is `Gucci`!
如果使用模板字符串表示多行字符串,则所有的空格、缩进和换行都会被保留在输出中。
$('#list').html(`
<ul><li>first</li><li>second</li>
</ul>
`);
上面代码中,所有模板字符串的空格和换行都是被保留的,比如<ul>
标签前面会有一个换行。如果想把行首和行尾的换行、空格等去掉,则使用trim方法即可。
$('#list').html(`
<ul><li>first</li><li>second</li>
</ul>
`.trim());
模板字符串中嵌入变量,要将变量名写在${}
之中。大括号内可以放入任意的JavaScript表达式,可以进行运算,以及引入对象属性。
var x = 1, y = 2;`${x} + ${y} = ${x + y}`;
// "1 + 2 = 3"`${x} + ${y * 2} = ${x + y * 2}`;
// "1 + 4 = 5"var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
模板字符串之中还可以调用函数。
function func() {return 'Hello';
}`${func()} World`;
// "Hello World"
如果大括号中的值不是字符串,则将按照一般的规则转换为字符串。如,若大括号中是一个对象,则将默认调用对象的toString方法,把对象转换为字符串。
如果模板字符串中的变量没有声明,则会报错。
// 变量place没有声明
var msg = `Hello, ${place}`;
// ReferenceError: place is not defined
模板字符串之间还可以进行嵌套。
var tmpl = addrs => `<table>${addrs.map(addr => `<tr><td>${addr.first}</td></tr><tr><td>${addr.last}</td></tr>`).join('')}</table>
`;tmpl([{first:'a', last: 'b'}]);// output:
/*"<table><tr><td>a</td></tr><tr><td>b</td></tr></table>
"*/
如果需要引用模板字符串本身,在需要时执行,可以像下面这样写。
// 写法一
var str = 'return ' + '`Hello ${name}!`';
var func = new Function('name', str);
func('Amy'); // "Hello Amy!"// 写法二
var str = '(name) => `Hello ${name}!`';
var func = eval.call(null, str);
func('Amy'); // "Hello Amy!"
2、标签模板
模板字符串的功能,不仅是上面那些,它还可以紧跟在一个函数后面,该函数将被调用来处理这个模板字符串,这种称为“标签模板”功能(Tagged template)。
标签模板函数第一个参数是字符串模板的常量数组,后面的每一个参数为表达式的计算结果,函数名称可以任意指定。下面是一个例子:
var a = 5, b = 10;function tag(strings, ...values) {console.log(strings[0]); // "Hello "console.log(strings[1]); // " world"console.log(strings[2]); // ""console.log(values[0]); // 15console.log(values[1]); // 50return "Anything";
}tag`Hello ${a + b} world ${a * b}`;
// Anything
alert`123`
// 等同于
alert(123)
标签模板其它是一种特殊的函数调用形式,“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
var a = 1,b = 2;tag`Hello ${a + b} world ${a * b}`;
上面代码中,模板字符串前面有一个标识名tag,它是一个函数。整个表达式的返回值就是tag函数处理模板字符串后的返回值。
函数tag依次会接收到多个参数。
tag函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分,也就是说,变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间,以此类推。
tag函数的其他参数,都是模板字符串各个变量被替换的值。本例中,模板字符串含有两个变量,因此tag会接收到value1和value2两个参数。
tag函数所有参数的实际值如下:
- 第一个参数: [‘Hello ‘, ’ world’, ”]
- 第二个参数: 3
- 第三个参数: 2
也就是说,tag函数实际上是用下面的形式调用:
tag(['Hello ',' world', ''], 3, 2);
3.String对象的raw方法
String.raw方法用来充当模板字符串的处理函数,返回一个除表达式和变量会被替换,其它都保持原样的字符串。
String.raw`Hi\n${2+3}!`;
// "Hi\n5!"String.raw`Hi\u000A!`;
// "Hi\u000A!"String.rwa`Hi\\n`;
// "Hi\\n"
String.raw方法可以作为处理模板字符串的基本方法,它会将所有变量替换,而且对斜杠进行转义,方便下一步作为字符串来使用。
ES6:模板字符串的简单使用相关推荐
- 后端字段为null,前端使用ES6模板字符串进行展示
项目需求:后端字段为null,前端使用ES6模板字符串展示为空 未处理前效果: // ES6的模板字符串可写表达式<template #default="{ row }"&g ...
- [ 前端开发 ] ES6模板字符串
ES6模板字符串 模板字符串是 ES6 的新特性,他的作用是减少了字符串的拼接操作,提高了程序的可读性 接下来看一个栗子
- ES6模板字符串【${}配合反单引号一起用】
转自: https://www.cnblogs.com/shihuc/p/10238511.html 先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜. ...
- 重学ES6 模板字符串
在两三年前,jQuery还是比较主流的开发技术,当我们要为页面添加DOM时,一般,我们是这样写的 $("#container").append('Today is <b> ...
- 高级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 ...
最新文章
- eeglab教程系列(12)-使用ICA分解数据
- ES6中表达export default const是无效的
- 南京晓庄学院大一第二学期计算机数据结构期末考试试卷及答案,南京晓庄学院数据结构题库参考标准答案...
- openresty 环境搭建
- Codeforces.802C.Heidi and Library (hard) (费用流zkw)
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_01 File类_5_File类获取功能的方法...
- (四)BP神经网络预测(上)
- 学习如何使用css给数字加圆圈效果
- 想和你去吹吹风(张学友演唱歌曲)
- 深入解析淘宝Diamond之客户端架构
- Salesforce的V2MOM工作法:明确企业在做什么
- 服务器的型号规格,云服务器规格型号
- 分号的html文本,在Vue中利用v-HTML按分号将文本换行的例子_輕微_前端开发者
- 基于Linux系统sqlite3数据库的学生信息管理系统
- 小米 11 ultra旗舰版官方原版ROM系统MIUI13所有固件
- IOS项目新手引导页图片适配方案
- IE浏览器图片不显示,报DOM7009: 无法解码 URL 处的图像问题的解决方法
- 极客战记[森林]CHALLENGE:MAGIC EXAM
- 苹果手机如何关闭自动续费_自动续费?教你这样一键关闭
- Handler运行机制