当前位置: 首页 > 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

相关文章:

什么是 ES6 “模板语法” ?

ES6 提出了“模板语法”的概念。在 ES6 以前&#xff0c;拼接字符串是很麻烦的事情 var name css var career coder! var hobby [coding ,"writing] var finalString my name is name &#xff0c;I work as a career I love hobby[0] and hobby[1]仅仅几…...

[项目实战2]贪吃蛇游戏

目录 贪吃蛇游戏&#xff1a;&#xff1a; 一、游戏效果及功能实现&#xff1a; 1.规则 ​​​​​​​ ​​​​​​​ ​​​​​​​ 2.基本功能实现 ​​​​​​​ ​​​​​​​ ​​​​​​​ 3.技术要点 ​​​​​​​…...

关于FPGA中添加FIR IP核(采用了GOWIN EDA)

文章目录 前言一、IP核二、MATLAB文件三、导出系数COE文件1.设计滤波器2.用官方的matlab代码或者直接用文本文件 四、进行模块化设计源文件 前言 FIR滤波器的特点是其输出信号是输入信号的加权和&#xff0c;权值由滤波器的系数决定。每个系数代表了滤波器在特定延迟位置上的“…...

1. 使用springboot做一个音乐播放器软件项目【前期规划】

背景&#xff1a; 现在大部分音乐软件都是要冲会员才可以无限常听的。对于喜欢听音乐的小伙伴&#xff0c;资金又比较紧张&#xff0c;是那么的不友好。作为程序员的我&#xff0c;也是喜欢听着歌&#xff0c;敲着代码。 最近就想做一个音乐播放器的软件&#xff0c;在内网中使…...

【Dify】Dify自定义模型设置 | 对接DMXAPI使用打折 Openai GPT 或 Claude3.5系列模型方法详解

一、Dify & DMXAPI 1、Dify DIFY&#xff08;Do It For You&#xff09;是一种自动化工具或服务&#xff0c;旨在帮助用户简化操作&#xff0c;减少繁琐的手动操作&#xff0c;提升工作效率。通过DIFY&#xff0c;用户能够快速完成任务、获取所需数据&#xff0c;并且可以…...

【Rust自学】10.8. 生命周期 Pt.4:方法定义中的生命周期标注与静态生命周期

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 10.8.1. 方法定义中的生命周期标注 还记得在上一篇文章 10.7. 生命周期 Pt.3 中所提到的省略生命周期的三条规则吗&#xff1a; 规则1&…...

121 买入股票的最佳时机

思路1&#xff1a; 买的那天一定是卖的那天之前的最小值。 每到一天&#xff0c;维护那天之前的最小值即可。 假设第一天是最小值&#xff0c;最大值初始化为0&#xff0c;当以后某天的价格小于最小值时&#xff0c;将最小值更新 当天价格大于最小值&#xff0c;说明有利可图…...

PID学习资料

TI公司的CONTROLSUITE https://www.ti.com.cn/tool/cn/CONTROLSUITE学点PID专栏-小麦大叔PID控制器算法系列TI公开培训(中文字幕) 电机控制&#xff0c;PI控制器&#xff0c;PID控制器和现场定向控制 书籍&#xff1a; Advanced PID Control先进PID控制及其MATLAB仿真Practic…...

采用标准化的方式开展设计-研发中运用设计模式

概述 实现规范化、标准化的引导式设计&#xff0c;以业务需求为输入&#xff0c;识别业务特点&#xff0c;并通过引导式设计&#xff0c;找到最适合的设计模式、具体方案&#xff0c;汇总成为应用的设计&#xff0c;拉齐各应用的设计一的致性。 采用标准化的方式开展设计…...

【Linux系列】并发与顺序执行:在 Linux 脚本中的应用与选择

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

Scala语言的数据库交互

Scala语言的数据库交互 引言 在当今互联网应用的开发中&#xff0c;数据库几乎是每一个应用程序中不可或缺的一部分。选择合适的编程语言和工具与数据库进行交互&#xff0c;对于提升开发效率和应用性能至关重要。Scala作为一种现代的多范式编程语言&#xff0c;结合了面向对…...

字节青训十五题-Java-数字字符串格式化

问题 问题描述 小M在工作时遇到了一个问题&#xff0c;他需要将用户输入的不带千分位逗号的数字字符串转换为带千分位逗号的格式&#xff0c;并且保留小数部分。小M还发现&#xff0c;有时候输入的数字字符串前面会有无用的 0&#xff0c;这些也需要精简掉。请你帮助小M编写程…...

搭建一个本地轻量级且好用的学习TypeScript语言的环境

需求说明 虽然 TypeScript 的在线 Playground 很方便 https://www.tslang.com.cn/play/&#xff0c;但毕竟是在浏览器中使用&#xff0c;没有本地的 IDE 那么顺手。所以我想搭建一个本地类似 Playground 的环境&#xff0c;这样在学习 TypeScript 的过程中&#xff0c;可以更方…...

apex安装

安装过程复杂曲折&#xff0c;网上说的很多办法&#xff0c;貌似成功了&#xff0c;实际还是没起作用。 先说成功过程&#xff0c;执行下面命令&#xff0c;安装成功&#xff08;当然&#xff0c;前提是你要先配置好编译环境&#xff09;&#xff1a; &#xff08;我的环境&a…...

会员制电商创新:开源 AI 智能名片与 2+1 链动模式的协同赋能

摘要&#xff1a;本文聚焦于电商领域会员制的关键作用&#xff0c;深入探讨在传统交易模式向数字化转型过程中&#xff0c;如何借助开源 AI 智能名片以及 21 链动模式商城小程序&#xff0c;实现对会员数据的精准挖掘与高效利用&#xff0c;进而提升企业的营销效能与客户洞察能…...

Vue 3 和 Electron 来构建一个桌面端应用

我们将使用 Vue 3 和 Electron 来构建一个桌面端应用&#xff0c;该应用可以通过 Websocket 与服务器进行通信&#xff0c;并实现心跳检测、客户端上线、获取资产信息以及修改资产状态的功能。以下是实现步骤的概述&#xff1a; 项目结构&#xff1a;创建一个 Vue 3 项目&…...

生物医学信号处理--绪论

前言 参考书籍&#xff1a;刘海龙&#xff0c;生物医学信号处理&#xff0c;化学工业出版社 生物医学信号分类 1、由生理过程自发或者诱发产生的电生理信号和非电生理信号 • 电生理信号&#xff1a;ECG/心电、EEG/脑电、EMG/肌电、 EGG/胃电、 EOG/眼电 • 非电生理信号&am…...

STM32之CAN通讯(十一)

STM32F407 系列文章 - CAN通讯&#xff08;十一&#xff09; 目录 前言 一、CAN 二、CAN驱动电路 三、CAN软件设计 1.CAN状态初始化 2.头文件相关定义 3.接收中断服务函数 4.用户层使用 1.用户层相关定义 2.发送数据 3.接收数据 1.查询方式处理 2.中断方式处理 3…...

在macOS上安装MySQL

macOS的MySQL有多种不同的形式&#xff1a; 1、本机包安装程序&#xff0c;它使用本机macOS安装程序&#xff08;DMG&#xff09;引导您完成MySQL的安装。有关详细信息&#xff0c;请参阅第2.4.2节&#xff0c;“使用本机包在macOS上安装MySQL”。您可以将包安装程序与macOS一…...

netty解码器LengthFieldBasedFrameDecoder用法详解

Netty Netty是一个高性能、异步事件驱动的网络应用程序框架,它提供了对并发和异步编程的抽象,使得开发网络应用程序变得更加简单和高效。 在Netty中,EventLoopGroup是处理I/O操作的多线程事件循环器。在上面的示例中,我们创建了两个EventLoopGroup实例:bossGroup和worker…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...