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

什么是 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.lryc.cn/news/517261.html

相关文章:

  • [项目实战2]贪吃蛇游戏
  • 关于FPGA中添加FIR IP核(采用了GOWIN EDA)
  • 1. 使用springboot做一个音乐播放器软件项目【前期规划】
  • 【Dify】Dify自定义模型设置 | 对接DMXAPI使用打折 Openai GPT 或 Claude3.5系列模型方法详解
  • 【Rust自学】10.8. 生命周期 Pt.4:方法定义中的生命周期标注与静态生命周期
  • 121 买入股票的最佳时机
  • PID学习资料
  • 采用标准化的方式开展设计-研发中运用设计模式
  • 【Linux系列】并发与顺序执行:在 Linux 脚本中的应用与选择
  • Scala语言的数据库交互
  • 字节青训十五题-Java-数字字符串格式化
  • 搭建一个本地轻量级且好用的学习TypeScript语言的环境
  • apex安装
  • 会员制电商创新:开源 AI 智能名片与 2+1 链动模式的协同赋能
  • Vue 3 和 Electron 来构建一个桌面端应用
  • 生物医学信号处理--绪论
  • STM32之CAN通讯(十一)
  • 在macOS上安装MySQL
  • netty解码器LengthFieldBasedFrameDecoder用法详解
  • 在循环链表中用头指针和用尾指针的好处
  • java项目之网上租贸系统源码(springboot+mysql+vue)
  • 我用AI学Android Jetpack Compose之入门篇(3)
  • get和post有什么区别
  • 编排式 Saga 模式
  • QT 下拉菜单设置参数 起始端口/结束端口/线程数量 端口扫描4
  • 缓存-Redis-常见问题-缓存击穿-永不过期+逻辑过期(全面 易理解)
  • 137. 只出现一次的数字 II
  • 【力扣热题100】—— Day18.将有序数组转换为二叉搜索树
  • PyTorch 官方文档 中文版本
  • 电力智能问答RAG: 多问题生成、思维链提示生成;混合编码和重排序策略