ES6模板字符串知识点记录

最新推荐文章于 2025-01-19 18:50:48 发布

原创最新推荐文章于 2025-01-19 18:50:48 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6模板字符串

前端专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了ES6模板字符串的使用方法，包括基本语法、多行字符串定义、变量嵌入及表达式运算，同时介绍了标签模板的概念及其应用场景。

js反引号

中心概括：

ES6模板字符串（Template String）是增强版的字符串，格式为引用反引号（··）

用作普通的字符串
定义多行字符串
在字符串中嵌入变量


//普通字符串
`study template string here with me `

//多行字符串
`study templat string 
here with me`

//字符串中嵌入变量
var tem = "template";
var st = "string";
`I know ${tem}${st} with you `

细节提醒

需用到反引号，则在前面用反斜杠转义
在使用模板字符串表示多行字符串时，所有空格（缩进、换行）都会保留在输出中
若想去掉空格，则使用``.trim()方法即可
一般将大括号里的转化为字符串，对象则默认调用对象的toString方法，
变量没有声明则会报错

一、嵌入变量的${}可以放入——JavaScript表达式、进行运算、引入对象属性、调用函数

var obj = {x:1,y:2};
 `${obj.x+obj.y}`

 function func(){
 	return 'hello'
 }
 `${func()} world`

二、(``)紧跟在一个函数后面——标签模板
解析：此函数被调用来处理模板函数

标签模板是一种特殊的函数调用形式，标签指的是函数，紧跟后面的模板字符串就是他的参数，
var a = 1,
    b = 2;

tag`Helo ${a + b} world ${a * b}`;
——————————————————————————————————————
function tag(stringArr, ...values) {
    // ...
}
第一个参数： [‘Hello ‘, ’ world’, ”]
第二个参数: 3
第三个参数： 2

tag(['Hello ',' world', ''], 3, 2);

与之功能相同的是String对象的raw方法
String.raw方法用来充当模板字符串的处理函数，返回除表达式和变量会被替换，保持原样的字符串。

String.raw`Hi\n${2+3}!`;
// "Hi\n5!"

String.raw`Hi\u000A!`;
// "Hi\u000A!"

String.rwa`Hi\\n`;
// "Hi\\n"