模板字面量（模板字符串）

模板字面量是创建字符串的新字面量语法，使用反引号（`）来分界。有三种特性：插值，多行和标记。

插值

使用占位符${expression} 将动态值放入创建的字符串中。

let name = "strick",
age = 29,str;
str = `name is "${name}".age is ${age}.`;
console.log(str)
//name is "strick".age is 29.

多行字符串

原生支持创建多行字符串，不需要再用加号，反斜线和换行符。能识别空白符。

let multi = `first line
second line
third line`;
console.log(multi)
//输出
first line
second line
third line

标记

一种特殊方式的函数调用，函数名后面直接跟模板字面量，它一般会包含两个参数，第一个是由没有被替换的部分组成的数组，第二个是剩余参数，包含了所有占位符中的计算结果。

//示例:
function foo(strings,...values){console.log(strings)console.log(values)
}
const desc = 'awesome'
foo`Everything is ${desc}!]`
//["Everything is ","!"]
//[“awesome”]

//应用
//过滤HTML字符串，防止用户输入恶意内容
function filter(strings,...values){return strings.reduce((s,v,idx)=>{if(idx>0){const prev = values[idx-1].replace(/</g,"&lt;").replace(/>/g,"&gt;")s+=prev}return s+v})
}const badCode = `<script>alert("abc")</script>`
const message = filter`<p>${badCode}
has been transformed safely~`
console.log(message)

输出：

模板字面量（模板字符串）相关推荐

ECMAScript 6 模板字面量的常见用法
模板字面量可以理解成是字符串的一种,形式上用反引号 `` 将内容括起来. 目录特点一:模板字面量会保留反引号内部的空格.回车.tab,会将\n,\t翻译. 特点二:支持字符串插值特点三:和标签函数 ...
JS模板字面量标签函数
定义标签函数会接收被插值记号分隔后的模板和对每个表达式求值的结果. 标签函数本身是一个常规函数,通过前缀到模板字面量来应用自定义行为. 标签函数接收到的参数依次是原始字符串数组和对每个表达式求值 ...
【精讲】Javascript模板字面量
文章目录模板字面量是什么? 将模板字面量传入函数(带标签的模板字符串) 第一个参数其他参数如何将模板字面量输出为完整字符串呢? 模板字面量是什么? 模板字面量,是允许嵌入表达式的字符串字面量. ...
JavaScript模板字面量（Template literals）介绍
JavaScript模板字面量(Template literals)介绍模板字面量(Template literals)是什么? 简单地说,是允许嵌入表达式的字符串字面量.在反引号中可以直接使用单引 ...
工作84：模板字面量
Python字面量、注释、变量、数据类型、数据类型的转换、标识符、运算符、字符串扩展、字符串格式化、数据输入（input语句）
数据来源 01 字面量什么是字面量字面量:在代码中,被写下来的的固定的值,称之为字面量常用的值类型字符串如何在代码中写它们总结: 02 注释注释的作用注释的分类注释实战总结 03 ...
深度讲解TS：这样学TS，迟早进大厂【15】：字符串字面量类型
博主是一个专注于前端开发的程序猿~ 曾经主做于vue,react,小程序,uniapp,RN等各大框架~ 现在主攻web安全,数据加密,项目架构,性能优化~ 技术之路,任道重远.未来属于努力奋斗的我们 ...
JS：关于JS字面量及其容易忽略的12个小问题
简要问题1:不能使用typeof判断一个null对象的数据类型问题2:用双等号判断两个一样的变量,可能返回false 问题3:对于非十进制,如果超出了数值范围,则会报错问题4:JS浮点数并不精确 ...
js之字面量、对象字面量的访问、关键字in的用法
一:字面量含义字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal) ...

模板字面量（模板字符串）

插值

多行字符串

标记

模板字面量（模板字符串）相关推荐

最新文章

热门文章