当前位置: 首页 > article >正文

什么是 ES6 “模板语法” ?

ES6 提出了“模板语法”的概念。在 ES6 以前,拼接字符串是很麻烦的事情

var name = 'css
var career = 'coder!
var hobby = ['coding ,"writing']
var finalString = 'my name is ' + name + ',I work as a' + career + 'I love ' + hobby[0] + ' and ' + hobby[1]

仅仅几个变量,写了这么多加号,还要时刻小心里面的空格和标点符号有没有跟错地方。但是有了模板字符串.拼接难度直线下降:

var name = 'css'
var career = 'coder'
var hobby = ['coding ,'writing']
var finalstring = `my name is ${name}, I work as a ${career} I love ${hobby[0]} and ${hobby[1]}`

字符串不仅更容易拼了,也更易读了,代码整体的质量都变高了。这就是模板字符串的第一个优势一一允许用${}的方式嵌入变量。但这还不是问题的关键,模板字符串的关键优势有两个:

  • 在模板字符串中,空格、缩进、换行都会被保留

  • 模板字符串完全支持“运算”式的表达式,可以在${}里完成一些计算

基于第一点,可以在模板字符串里无障碍地直接写 html 代码:

let list =`
    <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    </ul>
`;
console.log(message); // 正确输出,不存在报错

基于第二点,可以把一些简单的计算和调用丢进 ${} 来做

function add(a, b) {
    const finalstring = `${a} + ${b} = ${a+b}`
    console.log(finalstring)
}
add(1,2) // 输出1 + 2 = 3

除了模板语法外,ES6中还新增了一系列的字符串方法用于提升开发效率:

存在性判定:在过去,当判断一个字符/字符串是否在某字符串中时,只能用 indexOf>-1 来做。

现在ES6 提供了三个方法: includesstartsWithendsWith,它们都会返回一个布尔值来告诉你是否存在includes: 判断字符串与子串的包含关系:

const str1 = "haha!
const str2 = "xixi haha hehe
str2.includes(str1) // true

startsWith:判断字符串是否以某个/某串字符开头:

const str = "xixi haha hehe
str.startswith("haha') // false
str.startswith("xixi') // true

endsWith: 判断字符串是否以某个/某串字符结尾:

const str = 'xixi haha hehe!
str.endswith("hehe') // true

http://www.kler.cn/a/471987.html

相关文章:

  • 大型语言模型(LLM)中的tokens是什么
  • python vue3实现大文件分段续传(断点续传)--带暂停和继续功能
  • Matlab贝叶斯估计MCMC分析药物对不同种群生物生理指标数据评估可视化
  • 总结 Vue 请求接口的各种类型及传参方式
  • 【苏德矿高等数学】第4讲:数列极限定义-1
  • 【信息系统项目管理师】高分论文:论信息系统项目的风险管理(人民医院的信息系统)
  • 计算机毕业设计Python中华古诗词知识图谱可视化 古诗词智能问答系统 古诗词数据分析 古诗词情感分析模型 自然语言处理NLP 机器学习 深度学习
  • docker如何进入交互模式
  • 使用C#进行UI自动化:UIA2与UIA3及FlaUI的介绍
  • ffmpeg 命令行 重置音频或视频的时间戳
  • 【踩坑指南:2025年最新】如何在Linux(Ubuntu)启动第一个Scala Hello World程序(Scala3)
  • SQL Server 中的覆盖索引
  • 生物医学信号处理--绪论
  • Ubuntu 下载安装 elasticsearch7.17.9
  • 一、金融知识储备
  • [Linux]Mysql9.0.1服务端脱机安装配置教程(redhat)
  • Elixir语言的语法糖
  • Pycharm连接远程解释器
  • 单片机实物成品-010 智能宠物喂食系统(代码+硬件+论文)
  • C++二十三种设计模式之单例模式