Javascript中的字符串拼接
字符串拼接是所有程序设计语言都需要的操作。当拼接结果较长时,如何保证效率就成为一个很重要的问题。本文介绍的是Javascript中的字符串拼接,希望对你有帮助,一起来看。
const icon = '';// 模板字符串
`hi ${icon}`;// join() 方法
['hi', icon].join(' ');// Concat() 方法
''.concat('hi ', icon);// + 操作符
'hi ' + icon;// RESULT
// hi
1. 模板字符串
如果你来自另一种语言(例如Ruby),则将熟悉字符串插值一词。这正是模板字符串要实现的目标。这是在字符串创建中包含表达式的一种简单方法,该方法简洁明了。
const name = 'samantha';
const country = '';
(1) 字符串连接中缺少空格的问题
在模板字符串之前,这是我的字符串的结果
"Hi, I'm " + name + "and I'm from " + country;
☝️ 你发现我的错误了吗?我缺少空格。在连接字符串时,这是一个非常普遍的问题。
// Hi, I'm samanthaand I'm from
(2) 用模板字符串解决
使用模板字符串,可以解决此问题。你可以按照你想要的字符串显示方式编写。所以很容易发现是否缺了一个空格,现在超级可读,耶!
`Hi, I'm ${name} and I'm from ${country}`;
2. join()
join 方法合并数组的元素并返回一个字符串。因为它与数组一起使用,所以如果要添加其他字符串,它非常方便。
const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const array = ['My handles are ', instagram, twitter];const tiktok = '@samantaming';array.push(tiktok);array.join(' ');// My handles are @samanthaming @samantha_ming @samanthaming
自定义分隔符
join 的好处在于,你可以自定义组合数组元素的方式。你可以通过在其参数中传递分隔符来实现。
const array = ['My handles are '];
const handles = [instagram, twitter, tiktok].join(', ');
// @samanthaming, @samantha_ming, @samanthamingarray.push(handles);array.join('');// My handles are @samanthaming, @samantha_ming, @samanthaming
3. concat()
使用 concat,可以通过在字符串上调用方法来创建新字符串。
const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const tiktok = '@samanthaming';'My handles are '.concat(instagram, ', ', twitter', ', tiktok);// My handles are @samanthaming, @samantha_ming, @samanthaming
结合字符串和数组
还可以使用 concat 将字符串与数组组合在一起。当我传递数组参数时,它将自动将数组项转换为以逗号分隔的字符串。
const array = [instagram, twitter, tiktok];'My handles are '.concat(array);// My handles are @samanthaming,@samantha_ming,@samanthaming
果您希望格式更好,我们可以使用 join 来定制分隔符。
const array = [instagram, twitter, tiktok].join(', ');'My handles are '.concat(array);// My handles are @samanthaming, @samantha_ming, @samanthaming
4. +操作符
关于在组合字符串时使用 + 运算符的一件有趣的事情。你可以用来创建新的字符串,也可以通过添加现有字符串来对其进行突变。
(1) 非可变
在这里,我们使用 + 创建一个全新的字符串。
const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const tiktok = '@samanthaming';const newString = 'My handles are ' + instagram + twitter + tiktok;
(2) 可变的
我们还可以使用 += 将其附加到现有字符串中。所以如果出于某种原因,你需要一种改变的方法,这可能是你的一个选择。
let string = 'My handles are ';string += instagram + twitter;// My handles are @samanthaming@samantha_ming
哦,该死的再次忘记了空格。看到了!连接字符串时很容易错过空格。
string += instagram + ', ' + twitter + ', ' + tiktok;
// My handles are @samanthaming, @samantha_ming, @samanthaming
感觉还是很乱的,我们把 join 扔进去吧!
string += [instagram, twitter, tiktok].join(', ');
// My handles are @samanthaming, @samantha_ming, @samanthaming
5. 字符串中的转义字符
当字符串中包含特殊字符时,组合时首先需要转义这些字符。让我们看一些情况,看看如何避免它们
(1) 转义单引号或撇号(’)
创建字符串时,可以使用单引号或双引号。知道了这些知识,当你的字符串中出现单引号时,一个很简单的解决方法就是用相反的方法来创建字符串。
const happy = ;["I'm ", happy].join(' ');''.concat("I'm ", happy);"I'm " + happy;// RESULT
// I'm
当然,您也可以使用反斜杠 \ 来转义字符。但是我发现它有点难以阅读,所以我并不经常这样。
const happy = ;['I\'m ', happy].join(' ');''.concat('I\'m ', happy);'I\'m ' + happy;// RESULT
// I'm
由于模板字符串正在使用反引号,因此这种情况不适用于它
(2) 转义双引号(“)
类似于转义单引号,我们可以使用相同的方法来使用相反的引号。因此,为了转义双引号,我们将使用单引号。
const flag = '';['Canada "', flag, '"'].join(' ');''.concat('Canada "', flag, '"');'Canada "' + flag + '"';// RESULT
// Canada ""
是的,还可以使用反斜杠转义符。
(3) 转义符(`)
因为模板字符串使用反引号创建其字符串,所以当要输出该字符时,我们必须使用反斜杠对其进行转义。
6. 使用哪种方式?
我展示了一些使用不同方式连接字符串的示例。哪种方法更好取决于所有情况。关于样式偏好,我喜欢遵循Airbnb风格指南。
因此,模板字符串必胜!
7. 为什么其他方式仍然重要?
知道其他的方法也还是很重要的。为什么这么说呢?因为并不是每个代码库都会遵循这个规则,或者你可能面对的是一个遗留代码库。作为一个开发者,我们需要能够适应和理解我们所处的任何环境。我们是来解决问题的,而不是抱怨技术有多老 除非这种抱怨是配合实际行动来改善的。那我们就有进步
Javascript中的字符串拼接相关推荐
- JavaScript如何实现字符串拼接操作
实际应用中,目标字符串的生成可能需要多个数据的拼接. 由于应用频繁,几乎是所有编程语言都必须掌握的操作,当然每种语言具有各自特点. 本文将通过代码实例详细介绍一下JavaScript如何实现字符串拼接 ...
- 在JavaScript中重复字符串的三种方法
In this article, I'll explain how to solve freeCodeCamp's "Repeat a string repeat a string" ...
- 如何在JavaScript中反转字符串?
在不使用内置函数( .reverse() .charAt()等)的情况下,如何在将字符串传递给带有return语句的函数时在JavaScript中将字符串原地(或原地)反向? #1楼 以下技术(或类似 ...
- 解析JavaScript中的字符串类型与字符编码支持
JavaScript中的字符串也像Python那样支持反斜杠的转移,并且字符集方面默认为Unicode,下面就来详细解析JavaScript中的字符串类型与字符编码支持 定义 字符串就是零个或多个排在 ...
- 在JavaScript中反转字符串的三种方法
This article is based on Free Code Camp Basic Algorithm Scripting "Reverse a String" 本文基于F ...
- 中单引号怎么转义_在JavaScript中组合字符串的4种方法
下面是在JavaScript中组合字符串的4种方法.我最喜欢的方法是使用模板字符串.为什么?因为它更具可读性,所以没有转义引号的反斜杠,没有笨拙的空格分隔符,也没有混乱的加号操作符 . const i ...
- 如何在JavaScript中获取字符串数组的字符串?
本文翻译自:How do you get a string to a character array in JavaScript? How do you get a string to a chara ...
- Go 语言中的字符串拼接
目录 1. 通过 + 号连接两个字符串 2. 使用 sprintf 函数 3. 使用 Join 函数 4. 使用 bytes.Buffer 的 WriteString 函数 5. 使用 buffer. ...
- Go语言中的字符串拼接方法介绍
本文介绍Go语言中的string类型.strings包和bytes.Buffer类型,介绍几种字符串拼接方法. 目录 string类型 strings包 strings.Builder类型 strin ...
最新文章
- 算法笔记_157:算法提高 c++_ch02_01(Java)
- 莫名的_locals属性
- 目标检测的尽头是语言建模?Hinton团队提出Pix2Seq,性能媲美DETR
- ACM-ICPC 2017 Asia Nanning
- 安卓布局中xml文件属性和ID简介
- 具有固定名称mysql.data_SQLServer数据库之未找到具有固定名称“System.Data.SqlClient”的 ADO.NET 提供程序的实体框架 解决方案...
- java testng 项目_java – Junit4和TestNG在Maven的一个项目中
- 输入输出流_内部存储·
- RayMarching2:给球加上光照
- linux上的手机管家,闪电手机管家极速版
- 文本生成系列之transformer结构扩展(三)
- A New Romance Is Likely to End up like Your Previous Relationship 为什么每次恋爱总会走向相似的结局?
- Ukey双因素身份认证步骤 安当加密
- 国外项目外包网站接活流程(新手上路版)
- python 01列表异或_【快速跟水】图像隐写的python实现
- 第1章 Redis查阅官网和基本配置
- (翻译)9种清晰直观的图标应用原则
- 小白虎远程控制软件待实现功能以及用户反馈! 请大家及时反馈需要完善的地方!
- 梦幻西游手游最多人的服务器,梦幻西游手游哪个区人多及区服选择分析
- 【FPGA基础篇】底层结构组成
热门文章
- mysql update锁表_MySQL执行update语句是锁行还是锁表分析
- php tp5生成条形码,thinkPHP框架实现生成条形码的方法
- idea创建spring boot项目初始时pom报错解决
- 三星s6 android 5.1.1,三星S6升级安卓5.1.1了:传感器失灵能解决吗?
- IOS系统中H5页面实现摇一摇功能
- Pushy入门文档中文翻译
- 一行代码,实现神奇的文字图片
- YUV422 YUV420 Planar \ Semi-Planar \ Interleaved格式详解
- dockerfile制作Java镜像
- cad怎么标注?简单标注方法分享