ES6入门:模板字符串

ES6入门:模板字符串ES6入门:模板字符串一、模板字符串constusername1=’alex’;constusername2=`alex`;console.log(username1,username2,username1===username2);//alexalextrue二、模板字符串与一般字符串的区别constperson={username:’Alex’,age:18,sex:’male’};一般字符串:constinfo=

大家好,欢迎来到IT知识分享网。ES6入门:模板字符串"

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

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信