为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第23天 再学JavaScript...

【金秋打卡】第23天 再学JavaScript ES(6-10)全版本语法大全

2022.11.16 23:12 58浏览

课程名称:再学JavaScript ES(6-10)全版本语法大全
课程章节:2-31 String(字符串拼接问题)
课程讲师:快乐动起来呀
课程内容:

ES6 引入了模板字符串解决这个问题
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

模板字符串,都是用反引号表示
如果在模板字符串中需要使用反引号,则前面要用反斜杠转义

let greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中

在某些时候,嵌套模板是具有可配置字符串的最简单也是更可读的方法
在模板中,只需在模板内的占位符 ${ } 内使用它们,就可以轻松地使用内部反引号
例如,如果条件 a 是真的,那么返回这个模板化的文字

ES5:

var classes = 'header'
classes += (isLargeScreen() ?
   '' : item.isCollapsed ?
     ' icon-expander' : ' icon-collapser');

在 ES2015 中使用模板文字而没有嵌套:

   const classes = `header ${ isLargeScreen() ? '' :
    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

在 ES2015 的嵌套模板字面量中:

  const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

带标签的模板字符串

更高级的形式的模板字符串是带标签的模板字符串。标签使您可以用函数解析模板字符串。标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。最后,你的函数可以返回处理好的的字符串(或者它可以返回完全不同的东西 , 如下个例子所述)。用于该标签的函数的名称可以被命名为任何名字。

let person = 'Mike';
let age = 28;

function myTag(strings, personExp, ageExp) {
  let str0 = strings[0]; // "That "
  let str1 = strings[1]; // " is a "
  let str2 = strings[2]; // "."

  let ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  // We can even return a string built using a template literal
  return `${str0}${personExp}${str1}${ageStr}${str2}`;
}

let output = myTag`That ${ person } is a ${ age }.`;

console.log(output);
// That Mike is a youngster.

课程收获:
模板字符串是增强版的字符串,用反引号(`)标识
可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中,不想要这个换行,可以使用trim方法消除它

图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消