阿里云-云小站(无限量代金券发放中)
【腾讯云】云服务器、云数据库、COS、CDN、短信等热卖云产品特惠抢购

送你十条 JavaScript 字符串技巧

269次阅读
没有评论

共计 2935 个字符,预计需要花费 8 分钟才能阅读完成。

导读 字符串是几乎所有编程语言中最基本的数据类型之一。同时,它也是新开发人员学习的最早的数据类型之一。然而,尤其是在 JavaScript 中,许多开发人员并不知道关于字符串的一些有趣的细节。希望此文对你有所帮助。

送你十条 JavaScript 字符串技巧
我们称一个字符序列为字符串。这几乎是所有编程语言中都有的基本类型之一。这里跟大家展示关于 JS 字符串的 10 个很棒的技巧,你可能还不知道哦?

1. 如何多次复制一个字符串

JS 字符串允许简单的重复,与纯手工复制字符串不同,我们可以使用字符串的 repeat 方法。

const laughing = '小智'.repeat(3) 
consol.log(laughing) // "小智小智小智" 
 
const eightBits = '1'.repeat(8) 
console.log(eightBits) // "11111111"
2. 如何填充一个字符串到指定的长度

有时,我们希望字符串具有特定长度。如果字符串太短,则需要填充剩余空间,直到达到指定的长度为止。

过去,主要还是使用库 left-pad。但是,今天我们可以使用 padStart 和 SpadEnd 方法,选择哪种方法取决于是在字符串的开头还是结尾填充字符串。

// 在开头添加 “0”,直到字符串的长度为 8。

// 在开头添加 "0",直到字符串的长度为 8。const eightBits = '001'.padStart(8, '0') 
console.log(eightBits) // "00000001" 
 
// 在末尾添加“*”,直到字符串的长度为 5。const anonymizedCode = "34".padEnd(5, "*") 
console.log(anonymizedCode) // "34***"
3. 如何将字符串拆分为字符数组

有多种方法可以将字符串分割成字符数组,我更喜欢使用扩展操作符(…):

const word = 'apple' 
const characters = [...word] 
console.log(characters) // ["a", "p", "p", "l", "e"]

注意,这并不总是像预期的那样工作。有关更多信息,请参见下一个技巧。

4. 如何计算字符串中的字符

可以使用 length 属性。

const word = "apple"; 
console.log(word.length) // 5

但对于中文来说,这个方法就不太靠谱。

const word = "" 
console.log(word.length) // 2

日本汉字?? 返回 length 为 2,为什么?JS 将大多数字符表示为 16 位代码点。但是,某些字符表示为两个 (或更多)16 位代码点,称为代理对。如果使用的是 length 属性,JS 告诉你使用了多少代码点。因此,??(hokke) 由两个代码点组成,返回错误的值。

那怎么去判断呢,使用解构操作符号(…)

const word = "" 
const characters = [...word] 
console.log(characters.length) // 1

这种方法在大多数情况下都有效,但是有一些极端情况。例如,如果使用表情符号,则有时此长度也是错误的。如果真想计算字符正确长度,则必须将单词分解为 字素簇(Grapheme Clusters),这超出了本文的范围,这里就不在这说明。

5. 如何反转字符串中的字符

反转字符串中的字符是很容易的。只需组合扩展操作符(…)、Array.reverse 方法和 Array.join 方法。

const word = "apple" 
const reversedWord = [...word].reverse().join("") 
console.log(reversedWord) // "elppa"

和前面一样,也有一些边缘情况。遇到边缘的情况就有需要首先将单词拆分为字素簇。

6. 如何将字符串中的第一个字母大写

一个非常常见的操作是将字符串的第一个字母大写。虽然许多编程语言都有一种本地方法来实现这一点,但 JS 需要做一些工作。

let word = 'apply' 
word = word[0].toUpperCase() + word.substr(1) 
console.log(word) // "Apple"

另一种方法:

// This shows an alternative way 
let word = "apple"; 
 
// 使用扩展运算符(`...`)拆分为字符 
 
const characters = [...word]; 
characters[0] = characters[0].toUpperCase(); 
word = characters.join(""); 
 
console.log(word); // "Apple"
7. 如何在多个分隔符上分割字符串

假设我们要在分隔符上分割字符串,第一想到的就是使用 split 方法,这点,智米们肯定知道。但是,有一点大家可能不知道,就是 split 可以同时拆分多个分隔符, 使用正则表达式就可以实现:

// 用逗号 (,) 和分号 (;) 分开。const list = "apples,bananas;cherries" 
const fruits = list.split(/[,;]/) 
console.log(fruits); // ["apples", "bananas", "cherries"]
8. 如何检查字符串是否包含特定序列

字符串搜索是一项常见的任务。在 JS 中,你可以使用 String.includes 方法轻松完成此操作。不需要正则表达式。

const text = "Hello, world! My name is Kai!" 
console.log(text.includes("Kai")); // true
9. 如何检查字符串是否以特定序列开头或结尾

在字符串的开头或结尾进行搜索,可以使用 String.startsWith 和 String.endsWith 方法。

const text = "Hello, world! My name is Kai!" 
 
console.log(text.startsWith("Hello")); // true 
 
console.log(text.endsWith("world")); // false
10. 如何替换所有出现的字符串

有多种方法可以替换所有出现的字符串。可以使用 String.replace 方法和带有全局标志的正则表达式。或者,可以使用新的 String.replaceAll 方法。请注意,并非在所有浏览器和 Node.js 版本中都可用此新方法。

const text = "I like apples. You like apples." 
 
console.log(text.replace(/apples/g, "bananas")); 
// "I like bananas. You like bananas." 
 
console.log(text.replaceAll("apples", "bananas")); 
// "I lik
总结

字符串是几乎所有编程语言中最基本的数据类型之一。同时,它也是新开发人员学习的最早的数据类型之一。然而,尤其是在 JavaScript 中,许多开发人员并不知道关于字符串的一些有趣的细节。希望此文对你有所帮助。

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年,有高配

腾讯云新客低至 82 元 / 年,老客户 99 元 / 年

代金券:在阿里云专用满减优惠券

正文完
星哥玩云-微信公众号
post-qrcode
 0
星锅
版权声明:本站原创文章,由 星锅 于2024-07-25发表,共计2935字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。
阿里云-最新活动爆款每日限量供应
评论(没有评论)
验证码
【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中

星哥玩云

星哥玩云
星哥玩云
分享互联网知识
用户数
4
文章数
19351
评论数
4
阅读量
7997122
文章搜索
热门文章
星哥带你玩飞牛NAS-6:抖音视频同步工具,视频下载自动下载保存

星哥带你玩飞牛NAS-6:抖音视频同步工具,视频下载自动下载保存

星哥带你玩飞牛 NAS-6:抖音视频同步工具,视频下载自动下载保存 前言 各位玩 NAS 的朋友好,我是星哥!...
星哥带你玩飞牛NAS-3:安装飞牛NAS后的很有必要的操作

星哥带你玩飞牛NAS-3:安装飞牛NAS后的很有必要的操作

星哥带你玩飞牛 NAS-3:安装飞牛 NAS 后的很有必要的操作 前言 如果你已经有了飞牛 NAS 系统,之前...
我把用了20年的360安全卫士卸载了

我把用了20年的360安全卫士卸载了

我把用了 20 年的 360 安全卫士卸载了 是的,正如标题你看到的。 原因 偷摸安装自家的软件 莫名其妙安装...
再见zabbix!轻量级自建服务器监控神器在Linux 的完整部署指南

再见zabbix!轻量级自建服务器监控神器在Linux 的完整部署指南

再见 zabbix!轻量级自建服务器监控神器在 Linux 的完整部署指南 在日常运维中,服务器监控是绕不开的...
飞牛NAS中安装Navidrome音乐文件中文标签乱码问题解决、安装FntermX终端

飞牛NAS中安装Navidrome音乐文件中文标签乱码问题解决、安装FntermX终端

飞牛 NAS 中安装 Navidrome 音乐文件中文标签乱码问题解决、安装 FntermX 终端 问题背景 ...
阿里云CDN
阿里云CDN-提高用户访问的响应速度和成功率
随机文章
【1024程序员】我劝你赶紧去免费领一个AWS、华为云等的主机

【1024程序员】我劝你赶紧去免费领一个AWS、华为云等的主机

【1024 程序员】我劝你赶紧去免费领一个 AWS、华为云等的主机 每年 10 月 24 日,程序员们都会迎来...
星哥带你玩飞牛NAS-8:有了NAS你可以干什么?软件汇总篇

星哥带你玩飞牛NAS-8:有了NAS你可以干什么?软件汇总篇

星哥带你玩飞牛 NAS-8:有了 NAS 你可以干什么?软件汇总篇 前言 哈喽各位玩友!我是是星哥,不少朋友私...
星哥带你玩飞牛NAS硬件 01:捡垃圾的最爱双盘,暴风二期矿渣为何成不老神话?

星哥带你玩飞牛NAS硬件 01:捡垃圾的最爱双盘,暴风二期矿渣为何成不老神话?

星哥带你玩飞牛 NAS 硬件 01:捡垃圾的最爱双盘,暴风二期矿渣为何成不老神话? 前言 在选择 NAS 用预...
星哥带你玩飞牛NAS硬件03:五盘位+N5105+双网口的成品NAS值得入手吗

星哥带你玩飞牛NAS硬件03:五盘位+N5105+双网口的成品NAS值得入手吗

星哥带你玩飞牛 NAS 硬件 03:五盘位 +N5105+ 双网口的成品 NAS 值得入手吗 前言 大家好,我...
Prometheus:监控系统的部署与指标收集

Prometheus:监控系统的部署与指标收集

Prometheus:监控系统的部署与指标收集 在云原生体系中,Prometheus 已成为最主流的监控与报警...

免费图片视频管理工具让灵感库告别混乱

一言一句话
-「
手气不错
一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸

一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸

一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸 前言 作为天天跟架构图、拓扑图死磕的...
开源MoneyPrinterTurbo 利用AI大模型,一键生成高清短视频!

开源MoneyPrinterTurbo 利用AI大模型,一键生成高清短视频!

  开源 MoneyPrinterTurbo 利用 AI 大模型,一键生成高清短视频! 在短视频内容...
还在找免费服务器?无广告免费主机,新手也能轻松上手!

还在找免费服务器?无广告免费主机,新手也能轻松上手!

还在找免费服务器?无广告免费主机,新手也能轻松上手! 前言 对于个人开发者、建站新手或是想搭建测试站点的从业者...
仅2MB大小!开源硬件监控工具:Win11 无缝适配,CPU、GPU、网速全维度掌控

仅2MB大小!开源硬件监控工具:Win11 无缝适配,CPU、GPU、网速全维度掌控

还在忍受动辄数百兆的“全家桶”监控软件?后台偷占资源、界面杂乱冗余,想查个 CPU 温度都要层层点选? 今天给...
让微信公众号成为 AI 智能体:从内容沉淀到智能问答的一次升级

让微信公众号成为 AI 智能体:从内容沉淀到智能问答的一次升级

让微信公众号成为 AI 智能体:从内容沉淀到智能问答的一次升级 大家好,我是星哥,之前写了一篇文章 自己手撸一...