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

ES6 模板字符串详解

ES6 模板字符串详解

ES6(ECMAScript 6)引入了模板字符串(Template Literals),这是一种新的字符串字面量语法,使用反引号(`)来定义字符串。模板字符串不仅支持多行字符串,还允许在字符串中嵌入表达式,大大提高了字符串操作的灵活性和可读性。

1. 基本语法
1.1 普通字符串

模板字符串可以用作普通的字符串,语法与普通字符串相似,但使用反引号(`)包围。

const greeting = `Hello, world!`;
console.log(greeting); // 输出: Hello, world!
1.2 多行字符串

模板字符串支持多行字符串,不需要使用 \n 来表示换行。

const multiLine = `This is a
multi-line
string.`;
console.log(multiLine);
// 输出:
// This is a
// multi-line
// string.
2. 字符串插值
2.1 嵌入表达式

模板字符串允许在字符串中嵌入表达式,使用 ${expression} 语法。

const name = "Alice";
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // 输出: Hello, my name is Alice and I am 30 years old.
2.2 嵌入复杂表达式

嵌入的表达式可以是任何有效的 JavaScript 表达式,包括函数调用和算术运算。

const a = 5;
const b = 10;
const result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // 输出: The sum of 5 and 10 is 15.
3. 标签模板
3.1 基本概念

标签模板允许在模板字符串前添加一个标签函数,该函数可以对模板字符串进行自定义处理。

function tag(strings, ...values) {let result = '';for (let i = 0; i < values.length; i++) {result += strings[i] + values[i];}result += strings[strings.length - 1];return result.toUpperCase();
}const name = "Alice";
const age = 30;
const taggedString = tag`Hello, my name is ${name} and I am ${age} years old.`;
console.log(taggedString); // 输出: HELLO, MY NAME IS ALICE AND I AM 30 YEARS OLD.
3.2 标签函数参数

标签函数的第一个参数是一个字符串数组,其余参数是嵌入表达式的值。

function highlight(strings, ...values) {let result = '';for (let i = 0; i < values.length; i++) {result += strings[i] + `<span class="highlight">${values[i]}</span>`;}result += strings[strings.length - 1];return result;
}const name = "Alice";
const age = 30;
const highlightedString = highlight`Hello, my name is ${name} and I am ${age} years old.`;
console.log(highlightedString);
// 输出: Hello, my name is <span class="highlight">Alice</span> and I am <span class="highlight">30</span> years old.
4. 特殊字符处理
4.1 转义字符

在模板字符串中,反引号(`)和美元符号($)需要转义。

const str = `\` is the escape character for template literals.`;
console.log(str); // 输出: ` is the escape character for template literals.const str2 = `\$ is used to denote a variable or expression.`;
console.log(str2); // 输出: $ is used to denote a variable or expression.
4.2 原始字符串

使用 String.raw 标签函数可以获取原始字符串,包括转义字符。

const str = String.raw`This is a \n newline.`;
console.log(str); // 输出: This is a \n newline.
5. 嵌套模板字符串

模板字符串中可以嵌套另一个模板字符串。

const name = "Alice";
const age = 30;
const nestedString = `Hello, my name is ${`Nested: ${name}`} and I am ${age} years old.`;
console.log(nestedString); // 输出: Hello, my name is Nested: Alice and I am 30 years old.
6. 最佳实践
6.1 代码可读性

模板字符串提高了代码的可读性,尤其是在处理多行字符串和嵌入表达式时。

const name = "Alice";
const age = 30;
const address = "123 Main St";const profile = `Name: ${name}
Age: ${age}
Address: ${address}`;
console.log(profile);
// 输出:
// Name: Alice
// Age: 30
// Address: 123 Main St
6.2 性能考虑

虽然模板字符串在大多数情况下性能良好,但在极端情况下(如非常大的字符串或频繁的字符串拼接)可能会有一些性能开销。在这种情况下,可以考虑使用传统的字符串拼接方法。

7. 总结

模板字符串是 ES6 引入的一个非常有用的特性,它不仅简化了多行字符串的创建,还提供了强大的字符串插值功能。通过标签模板,还可以对字符串进行自定义处理,满足更复杂的需求。掌握模板字符串的使用方法,可以使你的代码更加简洁、可读和高效。

相关文章:

ES6 模板字符串详解

ES6 模板字符串详解 ES6&#xff08;ECMAScript 6&#xff09;引入了模板字符串&#xff08;Template Literals&#xff09;&#xff0c;这是一种新的字符串字面量语法&#xff0c;使用反引号&#xff08;&#xff09;来定义字符串。模板字符串不仅支持多行字符串&#xff0c;…...

浏览器插件启动本地程序

浏览器插件支持启动本地程序&#xff0c;且支持win、mac、linux多个平台&#xff0c;使用的是nativeMessaging。nativeMessaging官方api说明。nativeMessaging支持启动本地程序且进行通信。 我们直接拿官方提供的例子进行说明&#xff0c;github地址。 以win为例 1、添加注册…...

Ubuntu ESP32开发环境搭建

文章目录 ESP32开发环境搭建安装ESP-IDF搭建一个最小工程现象 ESP32开发环境搭建 最近有个小项目需要用到能够联网的mcu驱动&#xff0c;准备玩玩esp的芯片&#xff0c;记录下ESP32开发环境搭建的过程。 ESP-IDF 是乐鑫科技为其 ESP32 系列芯片提供的官方开发框架。这个框架主…...

【gitlab】部署

直接RPM安装 部署的方式是&#xff1a;使用外部的nginx作为代理&#xff0c;使用https方式。 1、下载安装文件 gitlab-ce-17.0.3-ce.0.el7.x86_64.rpm 2、安装 yum install gitlab-ce-17.0.3-ce.0.el7.x86_64.rpm 或者安装yum源在线安装: 添加镜像源&#xff1a;新建 /et…...

vue中路由缓存

vue中路由缓存 问题描述及截图解决思路关键代码及打印信息截图 问题描述及截图 在使用某一平台时发现当列表页码切换后点击某一卡片进入详情页后&#xff0c;再返回列表页时页面刷新了。这样用户每次看完详情回到列表页都得再重新输入自己的查询条件&#xff0c;或者切换分页到…...

Github 2024-11-18 开源项目周报 Top15

根据Github Trendings的统计,本周(2024-11-18统计)共有15个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目8TypeScript项目4Jupyter Notebook项目2Go项目2Shell项目1OpenHands: 人工智能驱动的软件开发代理平台 创建周期:195 天开发语言:P…...

GRCNN使用onnxruntime和tensorrt推理

下载GRCNN项目&#xff1a;https://github.com/skumra/robotic-grasping.git 导出onnx模型&#xff1a; import torchnet torch.load("trained-models/jacquard-rgbd-grconvnet3-drop0-ch32/epoch_42_iou_0.93") x torch.rand(1, 4, 300, 300).cuda() torch.onnx.…...

java中的this关键字

&#x1f389;&#x1f389;&#x1f389;欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!&#x1f64f;&#x1f64f;&#x1f64f; 文章目录…...

Easyexcel(3-文件导出)

相关文章链接 Easyexcel&#xff08;1-注解使用&#xff09;Easyexcel&#xff08;2-文件读取&#xff09;Easyexcel&#xff08;3-文件导出&#xff09; 响应头设置 通过设置文件导出的响应头&#xff0c;可以自定义文件导出的名字信息等 //编码格式为UTF-8 response.setC…...

iOS应用网络安全之HTTPS

移动互联网开发中iOS应用的网络安全问题往往被大部分开发者忽略, iOS9和OS X 10.11开始Apple也默认提高了安全配置和要求. 本文以iOS平台App开发中对后台数据接口的安全通信进行解析和加固方法的分析. 1. HTTPS/SSL的基本原理 安全套接字层 (Secure Socket Layer, SSL) 是用来…...

openharmony napi调试笔记

一、动态库的编译 使用的编译环境是ubuntu20.04 1、使用vscode配置openharmony sdk交叉编译环境 首先下载openharmony的sdk&#xff0c;如native-linux-x64-4.1.7.5-Release.zip 解压后native目录下就是交叉编译用的sdk 在要编译的源代码目录下新建.vscode目录&#xff0c…...

springboot基于微信小程序的农产品交易平台

摘 要 随着网络科技的发展&#xff0c;利用小程序对基于微信小程序的农产品交易平台进行管理已势在必行&#xff1b;该系统将能更好地理解用户需求&#xff0c;优化基于微信小程序的农产品交易平台策略&#xff0c;提高基于微信小程序的农产品交易平台效率和质量。本文讲述了基…...

Spring Boot 注解

Spring Boot 是基于 Spring 框架的开发框架&#xff0c;提供了许多注解来简化配置和开发。以下是一些常见的 Spring Boot 注解&#xff0c;包括它们的作用和简单介绍&#xff1a; 1. SpringBootApplication 作用&#xff1a;标识一个 Spring Boot 应用的入口点。它是一个组合…...

P8692 [蓝桥杯 2019 国 C] 数正方形:结论,组合数学

题目描述 在一个 NNNN 的点阵上&#xff0c;取其中 44 个点恰好组成一个正方形的 44 个顶点&#xff0c;一共有多少种不同的取法&#xff1f; 由于结果可能非常大&#xff0c;你只需要输出模 10971097 的余数。 如上图所示的正方形都是合法的。 输入格式 输入包含一个整数 …...

Spring Boot开发—— 实现订单号生成逻辑

文章目录 1. UUID2. 数据库序列或自增ID3. 时间戳 随机数/序列4. 分布式唯一ID生成方案 几种常见的解决方案 UUID 实例代码数据库序列或自增ID时间戳 随机数/序列分布式唯一ID生成方案 Snowflake ID结构类定义和变量初始化构造函数ID生成方法辅助方法 在 Spring Boot 中设计…...

React中Redux的基本用法

Redux是React中使用较多的状态管理库&#xff0c;这篇文章主要介绍了Redux的基本用法&#xff0c;快来看看吧 首先我们需要新建一个React项目&#xff0c;我使用的ReactTS&#xff0c;文件结构如下 Redux的相关使用主要在store文件中 Store&#xff1a;存储整个应用的状态Act…...

unity3d————基础篇小项目(设置界面)

代码示例&#xff1a; 设置界面 using System.Collections; using System.Collections.Generic; using UnityEngine;public class SettingPanel : BasePanel<SettingPanel> {public UIButton btnClose;public UISlider sliderMusic;public UISlider sliderSound;public…...

推荐几个 VSCode 流程图工具

Visual Studio Code&#xff08;简称VSCode&#xff09;是一个由微软开发的免费、开源的代码编辑器。 VSCode 发布于 2015 年&#xff0c;而且很快就成为开发者社区中广受欢迎的开发工具。 VSCode 可用于 Windows、macOS 和 Linux 等操作系统。 VSCode 拥有一个庞大的扩展市…...

用java和redis实现考试成绩排行榜

一、引言 在各类考试场景中&#xff0c;无论是学校里的学业测试&#xff0c;还是线上培训课程的考核&#xff0c;亦或是各类竞赛的选拔&#xff0c;成绩排行榜都是大家颇为关注的一个元素。它不仅能直观地展示考生之间的成绩差异&#xff0c;激发大家的竞争意识&#xff0c;还能…...

hhdb数据库介绍(9-24)

计算节点参数说明 failoverAutoresetslave 参数说明&#xff1a; PropertyValue参数值failoverAutoresetslave是否可见是参数说明故障切换时&#xff0c;是否自动重置主从复制关系默认值falseReload是否生效否 参数设置&#xff1a; <property name"failoverAutor…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...