ES6新特性模板字符串Template String

发布时间：2025-09-21 11:39:11 阅读量： 1 来源： 互联网转载

前言

在没有模板字符串Template String的时候，我们有的时候赋值一些带有符号的字符串非常麻烦，如果特殊字符比较多，那么就需要做大量的转移，而且让整个代码看起来不那么的流畅，在ES6之后使用模板字符串就避免了这些问题。

传统形势的赋值

Let a="{\n" +    "  \"Id\": 2171,\n" +    "  \"Title\": \"ES6新特性模块化Modules\",\n" +    "  \"Username\": \"瘦死的猪\",\n" +    "  \"List\": 2,\n" +    "  \"Times\": \"2022-12-27T15:44:46.593\",\n" +    "  \"From\": \"奕玖科技\",\n" +    "  \"Hist\": 0,\n" +    "  \"Good\": 0\n" +    "}"

上面我们把一组JSON字符串数据赋值给变量a，这里面就需要做很多的转义。当然有一些IDE有自动转义的功能，但如果没有的话就需要我们手动的取转义。

模板字符串赋值

let a=`{  "Id": 2171,  "Title": "ES6新特性模块化Modules",  "Username": "瘦死的猪",  "List": 2,  "Times": "2022-12-27T15:44:46.593",  "From": "奕玖科技",  "Hist": 0,  "Good": 0}`console.log(a)

我们看使用模板字符串的话就不需要转义了，变量的值看起来是不是更清晰了？打印后台后没有任何错误

模板字符串语法

`string text` //使用``符号进行赋值`string text line 1  string text line 2`// 允许直接换行`string text ${expression} string text` //${expression} 可以插入变量/函数等。tag `string text ${expression} string text` //标签模板字符串

模板字符串使用符号``来进行赋值，里面如果需要插入函数或则变量则通过${expression}来插入。比如我要插入一个变量b那么就${b}这样就行了。模板字符串允许多行输入可以直接回车就行，不需要其他的连接符。模板字符串里的反应好`需要使用转义符。

function tmp(){  return true}let s="字符串"let j=`开始插入变量s ${s} ，然后我们在插入函数${tmp()} 然后我们直接换行换行结束了,如果使用反引号\`需要转义符`console.log(j)

标签模板字符串

let a = function (p1,...p2) {  console.log(p1)  console.log(p2)}let name ='tom'let sex = "男"a `name:${name},sex:${sex}`

打印如下

可以看到标签模板的第一个参数返回的是由${}分割而成的一个数组，剩下的就一一对应它的值。不过这个确实不太好理解。

原始字符串

在标签函数里第一个参数里有一个.raw[]方法，该方法可以返回原始字符串。如上面的例子函数改变如下

let a = function (p1,...p2) {  console.log(p1.raw[0]) //打印字符串 name:}

ES6新特性合集 ES6新特性 Let Const Var的区别 ES6新特性解构赋值 ES6异步编程Promise对象全解析 ES6异步编程从Generator到Async/Await ES6新特性模块化Modules ES6新特性模板字符串Template String ES6新特性 Map的使用方法 ES6新特性之箭头函数 ES6新特性 map() filter() find()使用方法总结

上一篇: gis在物流系统中的作用

下一篇: ES6新特性 Map的使用方法

ES6新特性模板字符串Template String

热门文章