js模板字符串⽂章⽬录
资料与笔记
定义
模板字⾯量(模板字符串): 允许在其中嵌⼊表达式的字符串字⾯量
属于字符串字⾯量
允许将表达式嵌⼊其中(字符串插值)
可以是多⾏字符串
主要功能:
字符串插值(使⽤混合常量、变量、字⾯量和表达式的字符串字⾯量构造新 String值)
语法形式
单⾏简单字符串
` string text`
多⾏简单字符串
`string text line1
string text line2`
带占位符
`string text ${expression} string text`
带标签
tag`string text string text`
以上⼏种的混合
tag `string text ${expression} string text`
模板字符串特征(反引号，占位符，标签)
反引号:
普通字符串字⾯量: ⽤单引号或双引号标识
模板字符串字⾯量: ⽤反引号(``)标识
引号转义问题:
普通字符串字⾯量内使⽤单双引号: 需要反斜杠\转义
模板字符串内使⽤反引号:
模板字符串嵌套: ⽆需转义
其他: 需要反斜杠\转义
占位符: 形如 ${expression}的语法结构
占位符中表达式会和周围的⽂本⼀起被传递给⼀个默认的函数, 该函数负责将所有的部分连接起来，返回最终组合的新字符串的值.
标签
模板字符串若由表达式开头，该表达式被称为标签
标签通常是⼀个函数(或者最终值为函数类型的复杂表达式)
标签函数会在模板字符串处理完毕，形成最终输出之前被调⽤
(各占位符表达式的值和前后其他普通字符串 被当做参数传给该标签函数)
字符串插值⽰例
不使⽤模板字符串:
var a =5;
var b =10;
console.log('Fifteen is '+(a + b)+' and\nnot '+(2* a + b)+'.');
// "Fifteen is 15 and
// not 20."
模板字符串
var a =5;
var b =10;
console.log(`Fifteen is ${a + b} and
not ${2* a + b}.`);
// "Fifteen is 15 and
// not 20."
模板嵌套
⽤法: 在外层模板的占位符${}内再⽤反引号使⽤模板字符串
嵌套位置: 占位符${}内,⽽⾮占位符外,⽆需转义反引号
理解: 相当于多次调⽤模板字符串的默认处理函数(图⽰)
我们将模板字符串分割为不同两组:
默认函数的功能图:
实例说明
代码:
var fullName ='peter.Zhang';
var firstName ='peter';
var lastName ='Zhang';
var test1 =`I am ${fullName}`;
var test2 =`I am ${`${firstName}.${lastName}`}`; test1的执⾏过程⽰意图:
test2的执⾏过程⽰意图:
带标签的模板字符串
标签函数的传参
第⼀个参数为⼀个字符串数组strings(普通字符串)
其余的参数与表达式相关(各个同级占位符的值)
按照前⾯我们对模板字符串的分割，传参情况是这样的:(假设标签函数名为tag)
tag( [s1,s2,s3,…,s], Ve1, Ve2, …, Ven )
n+1
举例说明:
var fullName ='peterZhang';
var firstName ='peter';
var lastName ='Zhang';
var str = showArgs`My name is ${showArgs`${firstName}_${lastName}`}`;
js arguments
//函数定义区-----------------------------------------------------------
function showArgs(){
var args = arguments;
console.log(args);
}
控制台输出:
注: 第⼆⾏最后⼀项为undefined是因为我们嵌套的内层标签函数没有返回任何值给外层标签函数使⽤, 因此外层函数取占位符的值为undefined.
返回值的多样性
标签函数不⼀定必须返回⼀个字符串(可以返回为其他类型, 或者像上例⼀样，不返回任何值)
返回函数类型举例:
function template(strings,...keys){
return(
function(...values){
var dict = values[values.length -1]||{};
var result =[strings[0]];
keys.forEach(function(key, i){
var value = Number.isInteger(key)? values[key]: dict[key];
var value = Number.isInteger(key)? values[key]: dict[key];
result.push(value, strings[i +1]);
});
return result.join('');
}
);
}
var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y','A');// "YAY!"
var t2Closure = template`${0}${'foo'}!`;
t2Closure('Hello',{foo:'World'});// "Hello World!"
第⼀参数的raw属性(未求值替换的原始模板字符串)
第⼀参数(保存所有普通字符串的数组)含有⼀个raw属性(数组也是对象，可以添加属性)，他保存了未进⾏求值核替换的原模板字符串的原始值.
function tag(strings){
console.log(strings.raw[0]);
}
tag`string text line 1 \n string text line 2`;
// logs "string text line 1 \n string text line 2" ,
// including the two characters '\' and 'n'
总结
模板字符串是普通字符串处理的⼀类语法糖, 它使得⼀些字符串的操作更简洁，更加易读易于理解.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。