大家好,欢迎来到IT知识分享网。
ES6入门:模板字符串
一、模板字符串
const username1 = 'alex';
const username2 = `alex`;
console.log(username1, username2, username1 === username2);
//alex alex true
二、模板字符串与一般字符串的区别
const person = {
username: 'Alex',
age: 18,
sex: 'male'
};
一般字符串:
const info =
'我的名字是:' +
person.username +
', 性别:' +
person.sex +
', 今年' +
person.age +
'岁了';
console.log(info);
//我的名字是Alex,性别:male,今年18岁了
模板字符串:
const info = `我的名字是:${
person.username}, 性别:${
person.sex}, 今年${
person.age}岁了`;
console.log(info);
//我的名字是Alex,性别:male,今年18岁了
注意:
1.和其他东西一起使用的时候,使用模板字符串,方便注入
2.其他情况下使用模板字符串或一般字符串都行
三、模板字符串的注意事项
1、输出多行字符串
1)一般字符串:
const info = '第1行\n第2行';
// console.log(info);
结果:
第一行
第二行
2)模板字符串:
法一:
const info = `第1行\n第2行`;
法二:
const info = `第1行 第2行`; //这里前边有空格
输出结果:
法一:
第一行
第二行
法二:
第一行
第二行
//模板字符串中,所有的空格、换行或缩进都会被保留在输出之中
2.输出 ` 和 \ 等特殊字符
const info = `\`\\`; //需要转义
console.log(info); //`\
一般字符:不需要转义
const info = `'`;
console.log(info); //'
3.模板字符串的注入
const username = 'alex';
const person = {
age: 18, sex: 'male' };
const getSex = function (sex) {
return sex === 'male' ? '男' : '女';
};
const info = `${
username}, ${
person.age},${
getSex(person.sex)}`;
console.log(info);
结论:只要最终可以得出一个值的就可以通过 ${} 注入到模板字符串中
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/14413.html