ES6 - 字符串新增的一些常用方法
文章目录
- 0,新增的一些方法
- 1,includes()、startsWith()、endsWith()
- 2,repeat()
- 3,padStart()、padEnd()
- 4,trimStart()、trimEnd()
- 5,replaceAll()
- 6,at()
0,新增的一些方法
介绍一些ES6字符串对象新增的一些常用方法。
| 方法名 | 描述 |
|---|---|
includes() | 返回布尔值,表示是否找到了参数字符串 |
startsWith() | 返回布尔值,表示参数字符串是否在原字符串的头部 |
endsWith() | 返回布尔值,表示参数字符串是否在原字符串的尾部 |
repeat() | repeat方法返回一个新字符串,表示将原字符串重复n次。 |
padStart() | 用于头部补全,第一个参数是补全生效的最大长度,第二个参数是用来补全的字符串 |
padEnd() | 用于尾部补全,第一个参数是补全生效的最大长度,第二个参数是用来补全的字符串 |
trimStart() | 消除字符串头部的空格 |
trimEnd() | 消除尾部的空格 |
replace() | 只能替换第一个匹配到的字符 |
replaceAll() | 可以一次性替换所有匹配到的字符 |
at() | 返回参数指定索引位置的字符,支持负索引(即倒数的位置) |
1,includes()、startsWith()、endsWith()
传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法;
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
let like = "Eula - Amber";console.log( like.startsWith("Eula"));// trueconsole.log( like.endsWith("Amber")); // trueconsole.log(like.includes("-")); // true
这三个方法都支持第二个参数,表示开始搜索的位置。
let like2 = "Kaya"console.log(like2.startsWith("K",0)); // trueconsole.log(like2.endsWith("a",2)); // true 针对前n个字符中查找console.log(like2.endsWith("a",4)); // true 针对前n个字符中查找console.log(like2.includes("y",2)); // true
上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。
2,repeat()
repeat方法返回一个新字符串,表示将原字符串重复n次。
console.log("*".repeat(50));console.log("|==".repeat(18)); console.log("Eula-".repeat(10)); console.log("*".repeat(50));
打印如下:
**************************************************
|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==
Eula-Eula-Eula-Eula-Eula-Eula-Eula-Eula-Eula-Eula-
**************************************************
参数如果是小数,会被取整。
console.log('xiao'.repeat(2.1));//xiaoxiaoconsole.log('xiao'.repeat(2.9));//xiaoxiao
如果repeat的参数是负数或者Infinity,会报错。
console.log('xiao'.repeat(Infinity));//Invalid count value: Infinityconsole.log('xiao'.repeat(-1));// Invalid count value: -1
但是,如果参数是 0 到-1 之间的小数,则等同于 0,这是因为会先进行取整运算。0 到-1 之间的小数,取整以后等于-0,repeat视同为 0。
console.log('xiao'.repeat(-0.9) ); // "" 空串
如果repeat的参数是字符串,则会先转换成数字。
console.log('xiao'.repeat('aa')); // "" 空串console.log('xiao'.repeat('3') );// xiaoxiaoxiao
3,padStart()、padEnd()
字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。
基本用法:
padStart()和padEnd()一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。
console.log("x".padStart(2,0));// 0xconsole.log("x".padStart(5,0));// 0000xconsole.log("x".padEnd(2,'0'));// x0console.log("x".padEnd(5,'0'));// x0000
如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。
'abc'.padStart(10, '0123456789')
// '0123456abc'
如果省略第二个参数,默认使用空格补全长度。
'x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '
padStart()的常见用途是日期月份前面补0 ;如下案例:
let str = new Date();console.log(new Date().toLocaleDateString()); // 2023/8/2let month = (str.getMonth() + 1).toString();console.log(month.padStart(2, "0")); // 08
4,trimStart()、trimEnd()
新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致,trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。
const lik3 = " Eula ";console.log( lik3.trim()); // 'Eula'console.log( lik3.trimStart()); // 'Eula 'console.log( lik3.trimEnd()); // ' Eula'
上面代码中,trimStart()只消除头部的空格,保留尾部的空格。trimEnd()也是类似行为。
除了空格键,这两个方法对字符串头部(或尾部)的 tab 键、换行符等不可见的空白符号也有效。
5,replaceAll()
之前,字符串的实例方法replace()只能替换第一个匹配。
'aabbcc'.replace('b', '_')
// 'aa_bcc'
上面例子中,replace()只将第一个b替换成了下划线。
如果要替换所有的匹配,不得不使用正则表达式的g修饰符。
'aabbcc'.replace(/b/g, '_')
// 'aa__cc'
正则表达式毕竟不是那么方便和直观,ES6 引入了replaceAll()方法,可以一次性替换所有匹配。
'aabbcc'.replaceAll('b', '_')
// 'aa__cc'
它的用法与replace()相同,返回一个新字符串,不会改变原字符串。
String.prototype.replaceAll(searchValue, replacement)
如果searchValue是一个不带有g修饰符的正则表达式,replaceAll()会报错。这一点跟replace()不同。
// 不报错
'aabbcc'.replace(/b/, '_')// 报错
'aabbcc'.replaceAll(/b/, '_')
上面例子中,/b/不带有g修饰符,会导致replaceAll()报错。
replaceAll()的第二个参数replacement是一个字符串,表示替换的文本,其中可以使用一些特殊字符串。
$&:匹配的字符串。$`:匹配结果前面的文本。$':匹配结果后面的文本。$n:匹配成功的第n组内容,n是从1开始的自然数。这个参数生效的前提是,第一个参数必须是正则表达式。$$:指代美元符号$。
下面是一些例子。
// $& 表示匹配的字符串,即`b`本身
// 所以返回结果与原字符串一致
'abbc'.replaceAll('b', '$&')
// 'abbc'// $` 表示匹配结果之前的字符串
// 对于第一个`b`,$` 指代`a`
// 对于第二个`b`,$` 指代`ab`
'abbc'.replaceAll('b', '$`')
// 'aaabc'// $' 表示匹配结果之后的字符串
// 对于第一个`b`,$' 指代`bc`
// 对于第二个`b`,$' 指代`c`
'abbc'.replaceAll('b', `$'`)
// 'abccc'// $1 表示正则表达式的第一个组匹配,指代`ab`
// $2 表示正则表达式的第二个组匹配,指代`bc`
'abbc'.replaceAll(/(ab)(bc)/g, '$2$1')
// 'bcab'// $$ 指代 $
'abc'.replaceAll('b', '$$')
// 'a$c'
replaceAll()的第二个参数replacement除了为字符串,也可以是一个函数,该函数的返回值将替换掉第一个参数searchValue匹配的文本。
'aabbcc'.replaceAll('b', () => '_')
// 'aa__cc'
上面例子中,replaceAll()的第二个参数是一个函数,该函数的返回值会替换掉所有b的匹配。
6,at()
at()方法接受一个整数作为参数,返回参数指定位置的字符,支持负索引(即倒数的位置)。
const str = "Eula";console.log( str.at(1)); // Econsole.log( str.at(1)); // uconsole.log( str.at(-1));// a
如果参数位置超出了字符串范围,at()返回undefined
console.log( str.at(10)); // undefined
相关文章:
ES6 - 字符串新增的一些常用方法
文章目录 0,新增的一些方法1,includes()、startsWith()、endsWith()2,repeat()3,padStart()、padEnd()4,trimStart()、trimEnd()5,replaceAll()6,at() 0,新增的一些方法 介绍一些ES6…...
最新SQLMap安装与入门技术
点击星标,即时接收最新推文 本文选自《web安全攻防渗透测试实战指南(第2版)》 五折购买链接:u.jd.com/3ibjeF6 SQLMap详解 SQLMap是一个自动化的SQL注入工具,其主要功能是扫描、发现并利用给定URL的SQL注入漏洞。SQLMa…...
Java 使用 Google Guava 实现接口限流
一、引入依赖 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version> </dependency>二、自定义注解及限流拦截器 自定义注解:Limiter package com.haita…...
帮助中心的价值是什么?怎样才能在线搭建官网网站帮助中心?
帮助中心(Help Center)是一个提供公司或组织产品或服务相关信息的在线平台。它的价值在于为用户提供便捷的自助服务和解决问题的渠道,同时也能减轻客服人员的负担。 如何在线搭建官网网站帮助中心的步骤 确定需求:在搭建帮助中心…...
Kubernetes——理论基础
Kubernetes——理论基础 一、Kubernetes 概述1.K8S 是什么?2.为什么要用 K8S?3.Kubernetes 主要功能 二、Kubernetes 集群架构与组件三、Master 组件1.Kube-apiserver2.Kube-controller-manager3.Kube-scheduler4.配置存储中心——etcd 四、Node 组件1.Kubelet2.Ku…...
【VUE3】
Vue 3 是当下最流行的前端框架之一,其主要特点是性能更好、体积更小、更易于维护。下面是 Vue 3 的一些重要知识点和代码示例: 创建 Vue 实例 import { createApp } from vueconst app createApp({data() {return {message: Hello, Vue 3!}} })app.mo…...
《金融数据保护治理白皮书》发布(137页)
温馨提示:文末附完整PDF下载链接 导读 目前业界已出台数据保护方面的治理模型,但围绕金融数据保护治理的实践指导等尚不成熟,本课题围绕数据保护治理的金融实践、发展现状,探索和标准化相关能力要求,归纳总结相关建…...
上海亚商投顾:沪指震荡微涨 金融、地产午后大幅走强
上海亚商投顾前言:无惧大盘涨跌,解密龙虎榜资金,跟踪一线游资和机构资金动向,识别短期热点和强势个股。 市场情绪 三大指数早盘震荡,午后集体拉升反弹,创业板指涨超1%。券商等大金融板块午后再度走强&#…...
Linux文件管理知识:查找文件
前几篇文章一一介绍了LINUX进程管理控制命令及网络层面的知识体系,综所周知,一个linux系统是由很多文件组成的,那么既然有那么多文件,那我们该如何管理这些文件呢? Linux中的所有数据都是以文件形式存在的,…...
【TypeScript】安装的坑!
TypeScript安装 安装TypeScript安装时候可能报错这样开头的数据(无法枚举容器中的对象)——原因:没权限先解决没权限的问题如果发现无法修改-高级-修改继续安装想使用tsc-发现,tsc不能用解决方法:配置环境变量最后的最…...
spring boot 2.x 使用 jpa 映射 json mysql列数据映射乱码
通过下面的依赖,可以将 mysql 的 json 列字段(mysql 5.7及以上的版本支持),映射成 Java Bean <dependency><groupId>com.vladmihalcea</groupId><artifactId>hibernate-types-52</artifactId><v…...
创建Helm脚本
一、创建脚本 Helm 是 Kubernetes 的包管理工具,它可以帮助您简化和自动化 Kubernetes 应用程序的部署和管理。使用 Helm,您可以创建和管理称为 Helm Chart 的应用程序打包,这些 Chart 包含了 Kubernetes 资源和配置信息,可以在不…...
2.05 购物车后台刷新并显示
一.用户登录添加商品使用cookie存入购物车,并把购物车商品传入到后台 步骤1:创建购物车BO对象 public class ShopcartBO {private String itemId;private String itemImgUrl;private String itemName;private String specId;private String specName;p…...
2023年第四届“华数杯”数学建模思路 - 案例:异常检测
文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常检测 异常…...
inline的盒子设置transform不生效
目录 如何遇到的问题原因为什么会这样怎么解决 如何遇到的问题 最近在开发过程中,因为需要对一个icon进行旋转,而icon本身,是设置span的伪类来进行的,结果我发现无论怎么设置transform都无法使其生效。 span::before {font-famil…...
自然语言处理学习笔记(四)————词典分词
目录 1.中文分词 2.词典分词 (1)词的定义 (2)词典性质——齐夫定律 (3)词典 (4)加载词典 (5)hanlp词典路径 1.中文分词 中文分词:指的是将一…...
jsoncpp库和nlohmann-json库实现JSON与字符串类型转换
在ROS中,可以使用jsoncpp库来实现JSON与字符串类型之间的转换。jsoncpp是ROS自带的一个JSON库,它提供了一些函数来解析和生成JSON数据。 下面是一个使用jsoncpp库实现JSON与字符串类型转换的示例代码: #include <ros/ros.h> #include…...
20230803 函数传参引用
定义多输出变量的函数时,通过直接传参数内存地址在函数内部直接修改外部变量的值。需要定义函数时 在输入参数前加 引用符号 & 。 C 值传递、指针传递、引用传递详解...
IDEA SpringBoot项目引入外部jar并打包
1、首先,我们再pom.xml中导入依赖包时,打包可以正常进行。 但如果我们引入了第三方的外部jar包(这里需要先把jar包添加到该项目依赖库中,这里不做演示),如图 2、导致打包时报错,程序包不存在或…...
ModaHub魔搭社区——阿里云通义千问宣布开源!70亿参数模型上线魔搭社区,免费可商用
通义千问开源!8月3日,AI模型社区魔搭ModaHub上架两款开源模型Qwen-7B和Qwen-7B-Chat,阿里云确认其为通义千问70亿参数通用模型和对话模型,两款模型均开源、免费、可商用。在多个权威测评中,通义千问7B模型取得了远超国内外同等尺寸模型的效果,成为当下业界最强的中英文7B…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数,对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域,向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能,能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作,并通过具体…...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
淘宝扭蛋机小程序系统开发:打造互动性强的购物平台
淘宝扭蛋机小程序系统的开发,旨在打造一个互动性强的购物平台,让用户在购物的同时,能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机,实现旋转、抽拉等动作,增…...
华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题, 因为搜索范围是有界的,上界最大木板长度补充的全部木料长度,下界最小木板长度; 即left0,right10^6; 我们可以设置一个候选值x(mid),将木板的长度全部都补充到x,如果成功…...
tauri项目,如何在rust端读取电脑环境变量
如果想在前端通过调用来获取环境变量的值,可以通过标准的依赖: std::env::var(name).ok() 想在前端通过调用来获取,可以写一个command函数: #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...
Matlab实现任意伪彩色图像可视化显示
Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中,如何展示好看的实验结果图像非常重要!!! 1、灰度原始图像 灰度图像每个像素点只有一个数值,代表该点的亮度(或…...
何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡
何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践,很多人以为AI已经强大到不需要程序员了,其实不是,AI更加需要程序员,普通人…...
