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 `
细节提醒
  1. 需用到反引号,则在前面用反斜杠转义
  2. 在使用模板字符串表示多行字符串时,所有空格(缩进、换行)都会保留在输出中
  3. 若想去掉空格,则使用``.trim()方法即可
  4. 一般将大括号里的转化为字符串,对象则默认调用对象的toString方法,
  5. 变量没有声明则会报错

一、嵌入变量的${}可以放入——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"

你可能感兴趣的:(前端,es6模板字符串)