es6中的${}——用于字符串拼接

最新推荐文章于 2025-06-05 12:25:25 发布

飞翔的麻子

最新推荐文章于 2025-06-05 12:25:25 发布

阅读量1.1w

点赞数 7

CC 4.0 BY-SA版权

分类专栏：错误总结学习笔记

本文链接：https://blog.youkuaiyun.com/weixin_43207791/article/details/82740557

错误总结同时被 2 个专栏收录

3 篇文章

订阅专栏

学习笔记

3 篇文章

订阅专栏

本文介绍ES6新增的字符串拼接方法，利用反单引号（``）实现字符串模板，简化变量插入过程。文章包含具体使用步骤及示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是es6中新增的字符串方法

可以配合反单引号完成拼接字符串的功能

1、反单引号怎么打出来？
将输入法调整为英文输入法，单击键盘上数字键1左边的按键。

2、用法
step1：定义需要拼接进去的字符串变量
step2：将字符串变量用${}包起来，再写到需要拼接的地方

3、示例代码：

let a='Karry Wang';

let str=`I love ${a}, because he is handsome.`;
//注意：这行代码是用返单号引起来的

alert(str);

一定是用反单引号啊！不要写成单引号了！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

飞翔的麻子

关注关注

7
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ABAP、ES6、Angular、React 字符串模板对比与实战指南

2007 年 ~ 2025 年，深耕 SAP 技术 18 年

07-22

从 ABAP 的竖线模板到 ES6 的反引号，再到 Angular 的双花括号和 React 的 JSX 表达式，不同语言的设计者们都在回答同一个问题——如何让动态数据与静态文本优雅融合。理解它们背后的共性（占位符 + 求值 + 逃逸）与差异（语法糖、生命周期、渲染引擎），不仅能减少跨栈沟通成本，也能在性能、可维护性与安全性之间找到最优平衡。希望本文的对照和案例，能帮你快速在项目里落地一套一致的字符串模板使用规范，用最少的代码写出最清晰、最安全、最易读的文本拼接逻辑。

JavaScript高级——ES6基础入门

z16638522031的博客

10-12

1070

前言ES6（ECMAScript 6），也被称为ES2015，是JavaScript的第六个版本.它于2015年发布，并在现代JavaScript开发中扮演了重要的角色.学习方法:看千遍，不如自己动手写一遍遇到问题不要怕，微笑着面对它记笔记let 和 constconst和let是在ES6中引入的两个新的变量声明关键字，用于声明变量的作用域。const：const用于声明一个常量，其值在声明后不能被修改。常量必须在声明时进行初始化，而且不能再次赋值。

2 条评论您还未登录，请先登录后发表或查看评论

ES6 深入理解 ${ } 模版

超逸の学习技术博客

03-01

3352

写在开头本文将带你深入理解ES6中 ${ } 模版后续的文章都会与前端有关，欢迎各位同路途的人一起交流学习，3月份又是努力的开头，加油！推荐阅读：来自菜鸟的前端实习面经大厂春招实习生 ES 6专栏 -> 传送门如果想更多了解ES6，请参考之前写过的一些文章： ES6 一文弄懂 var let const 三剑客区别吊打面试题 ES6 面试题：你能说出浏览器上到此支持多少...

ES6 字符串拼接

a day a better

09-04

7481

ES6 字符串拼接 字符串拼接可以采用如下方式：方式一 ${var} var name1 ="Mike"; var age1=20; var message1=`hello,${name1},your age is ${age1}`; //这里的两个点是键盘上数字键1左边的按键，而不是单引号哦 alert(message1); 方式二 + 号拼接字符注意使用...

ES6字符串模板：告别拼接，拥抱优雅的字符串艺术！

最新发布

2401_85392853的博客

06-05

811

map()是数组对象的一个高阶函数方法，它遍历数组中的每个元素，对每个元素执行指定操作，并返回由这些操作结果组成的新数组。箭头函数（=>）是ES6引入的一种更简洁的函数表达式语法，它解决了传统函数中this指向的问题。// 传统函数// 箭头函数join()方法将数组的所有元素连接成一个字符串，并返回该字符串。const fruits = ['苹果', '香蕉', '橙子'];// "苹果,香蕉,橙子"// "苹果香蕉橙子"// "苹果 - 香蕉 - 橙子"join('')

ES6字符串拼接

SunQuanSweet的博客

10-31

511

ES6拼接字符串的方法：原代码： const time1 = moment().format('YYYY-MM-DD'); const time2 = moment(this.state.expireAt,'YYYY-MM-DD'); const day = time2.diff(time1, 'day'); expireAt: '剩余'+day+'天'（这里 ' 是单引号）原来拼接字符串需要...

es6字符串拼接

chongman9593的博客

07-28

280

/** * Before ES6 字符串拼接 */ 原生写法 var name = '丁香医生'; var desc = '丁香医生是面向大众的科普性健康类网站'; var html = function(name, desc){ var tpl = '公司名：' + name...

es6 字符串String的扩展(实例讲解)

08-29

在ES6之前，字符串拼接通常需要使用加号`+`来连接各个部分，如果涉及到变量，就需要在变量前后分别添加引号。但在ES6中引入了模板字符串，它使用反引号（`）来标识，并允许在字符串中直接嵌入变量。例如： ```...

JS——字符串

06-08

在JS中，字符串是数据类型的一种，用于处理文本信息。本文将深入探讨JS中的字符串相关知识点，包括其创建、操作、属性和方法。 1. **创建字符串** - 字面量方式：`var str = "Hello, World!";` - 构造函数方式：`...

ES6——Symbol

Rookie_lei的博客

07-24

1686

【代码】ES6——Symbol。

es6 字符串的拼接

sakura的博客

11-11

5002

es6 字符串的拼接常见代码： const name = '小明'; const score = 59; let result = ''; if(score > 60){ result = `${name}的考试成绩及格`; }else{ result = `${name}的考试成绩不及格`; } 这可能是我们常用的拼接方式，但是在es6中，${}中是可以放入JS表达式的，可以进行运算以及引用对象属性。改进代码： const name = '小明'; const score =

es6新增语法之${} 字符串拼接

ZKY的博客

09-11

1098

es6新增语法之${} 字符串拼接配合``符号使用举个栗子 let a='aaa bbb'; let str=`I love ${a}, because he is handsome`; //注意：这行代码是用返单号引起来的 //将字符串变量用${}包起来，再写到需要拼接的地方,需要拼接的字符串写在``里 alert(str); ...

`${}`用法拼接字符串

z1761419224的博客

05-15

2268

一般拼接字符串的方法 var name = "张三" var res = "叫我" + name + "。" console.log(res) 等同于 var name = "张三" var res = `叫我${name}。` console.log(res)

es6拼接字符串的方法

github_39088222的博客

05-02

3473

字符串拼接是开发时一个必不可少的环节，也是很恶心的一个环节，尤其是又臭又长的html字符串拼接。为什么说html字符串拼接很恶心呢，主要有以下几点：传统的字符串拼接不能正常换行传统的字符串拼接不能友好的插入变量传统的字符串拼接不能友好的处理单引号、双引号互相嵌套的问题。 es6的模板字符串解决了以上问题 es6 使用“(windows键盘英文输入法下tab键上面那个键)来定义一...

【ES6】模板字符串拼接

qq_43216389的博客

08-15

663

【代码】【ES6】模板字符串拼接。

es6拼接字符串的方式。

热门推荐

baidu_38027860的博客

05-25

2万+

在开始中我们经常会碰到某些数据是需要后台返给我们，然后我们进行拼接动态展现到页面中的，拼接字符很几种方式，例如或者：即使不拼接数据已经让人看着很难受了....更何况拼接数据了呢。例如：各种的引号和加号，看着实在是难受，尤其是对于新人来讲，拼接字符串简直就是噩梦。而es6中推出的``方式，也就是中文的波浪号按键，完美的解决了这个问题。不需要任何的加号和引号，全部字符仅仅由一组``符号包裹即可，而...

拼接字符串使用es6的方法拼接

m0_37909187的博客

04-26

3014

es6拼接字符串并且进行判断显示不同的数据

ES6字符串拼接、字符串常用方法、math数学函数方法

lawfy的博客

03-10

1138

常规拼接字符串繁琐，不便捷ES6新规可以使用反引号`来拼接${${${${}里面存放变量，方便快捷。

字符串的占位符是什么

12-29

### Python 中的字符串占位符在 Python 中，字符串占位符用于创建带有动态插入变量或表达式的字符串。常见的占位符有 `%` 和 `.format()` 方法。 #### 使用百分号 (`%`) 进行格式化这种传统方式使用 `%s`, `%d`, `%f` 等作为占位符来表示不同类型的值： ```python name = "Alice" age = 30 formatted_string = "Name: %s, Age: %d" % (name, age) print(formatted_string) # 输出 Name: Alice, Age: 30 ``` 此处展示了如何利用 `%` 操作符配合相应的类型说明符完成基本的数据填充[^1]。 #### 使用 `str.format()` 此方法提供更灵活的方式来进行复杂的字符串拼接操作： ```python greeting = "{} is {} years old.".format(name, age) print(greeting) # 输出 Alice is 30 years old. ``` 通过位置索引或者命名参数指定要替换的内容。 --- ### JavaScript ES6 模板字面量中的占位符 `${}` ES6 引入了一种新的字符串定义形式——模板字面量，它允许嵌入任意表达式而无需担心转义字符等问题。其特点是采用反引号 `` `...` `` 包裹整个字符串，并支持`${expression}` 形式的内联代码片段执行结果直接注入到最终输出里去[^2]。 ```javascript const name = 'Bob'; console.log(`Hello ${name}, how are you today?`); // 结果 Hello Bob, how are you today? ``` 这种方式不仅简化了多行文本处理还增强了可读性和实用性。 --- ### PHP 的 `sprintf()` 函数及其占位符 PHP 提供了一个强大的内置函数叫做 `sprintf()` ，专门用来构建带有一个或多個參數被替換後的新字符串。该函数接受一个格式化的字符串以及一系列待插入的实际数据项作爲參數传递给它[^3]。 ```php <?php $account = "qq1234"; $money = 100; $gold = 1000; $msg = sprintf("账号%s成功充值金额%d元，获得元宝%d个", $account, $money, $gold); echo $msg; // 输出账号qq1234成功充值金额100元，获得元宝1000个 ?> ``` 这里可以看到每个 `%` 开头的部分代表不同的数据类型并依次对应后面的实参列表。