JavaScript笔记——快速了解 ES6 新增字符串方法,开箱即用(含案例)

2023-07-08 02:10:41


在这里插入图片描述

📋前言

JavaScript 中文本表示文档的类型是 String,即字符串。当你使用 JavaScript 编程时,经常会处理字符串。ES6(ECMAScript 2015) 引入了许多新的字符串方法,使得字符串处理更加方便和强大。在本篇博客中,我们将介绍一些 ES6 新增的字符串方法,并提供示例代码来说明它们的用法。


🎯includes() 方法

includes(searchString, position) 方法用于判断一个字符串是否包含另一个字符串,返回布尔值。searchString 为要搜索的字符串,position 可选,表示开始搜索的位置。

const str = 'Hello, world!';
console.log(str.includes('world')); // true
console.log(str.includes('foo')); // false

在这里插入图片描述


🎯startsWith() 方法

startsWith(searchString, position) 方法用于判断一个字符串是否以另一个字符串开头,返回布尔值。

const str = 'Hello, world!';
console.log(str.startsWith('Hello')); // true
console.log(str.startsWith('hello')); // false

在这里插入图片描述


🎯endsWith() 方法

startsWith() 相反,endsWith(searchString, length) 方法用于判断一个字符串是否以另一个字符串结尾,返回布尔值。

const str = 'Hello, world!';
console.log(str.endsWith('world!')); // true
console.log(str.endsWith('world?')); // false

在这里插入图片描述


🎯repeat() 方法

repeat(count) 方法用于重复一个字符串若干次,返回新字符串。

const str = '黛琳ghz';
console.log(str.repeat(3));

在这里插入图片描述


🎯padStart() 方法

padStart(targetLength, padString) 方法用于将一个字符串填充到指定的长度,从字符串的开头开始填充,返回新字符串。

const str = '123';
console.log(str.padStart(7, '0')); // '0000123'

在这里插入图片描述


🎯padEnd() 方法

padStart() 相反,padEnd(targetLength, padString) 方法用于将一个字符串填充到指定的长度,从字符串的结尾开始填充,返回新字符串。

const str = '123';
console.log(str.padEnd(7, '0')); // '1230000'

在这里插入图片描述


🎯trim() 方法

trim() 方法用于去除一个字符串两端的空格,返回新字符串。

const str = '   Hello, world!   ';
console.log(str);
console.log(str.trim()); // 'Hello, world!'

在这里插入图片描述


🎯trimStart() 或 trimLeft() 方法

trimStart()trimLeft() 方法用于去除一个字符串开头的空格,返回新字符串。

const str = '   Hello, world!   ';
console.log(str);
console.log(str.trimStart()); // 'Hello, world!   '
console.log(str.trimLeft()); // 'Hello, world!   '

在这里插入图片描述


🎯trimEnd() 或 trimRight() 方法

trimEnd()trimRight() 方法用于去除一个字符串结尾的空格,返回新字符串。

const str = '   Hello, world!   ';
console.log(str);
console.log(str.trimEnd()); // 'Hello, world!   '
console.log(str.trimRight()); // 'Hello, world!   '

在这里插入图片描述


🎯replaceAll() 方法

replaceAll(searchValue, replaceValue) 方法用于将所有匹配的字符串替换为新的字符串,返回新字符串。

const str = 'Hello, world! Hello, world!';
console.log(str.replaceAll('Hello', 'Hi')); // 'Hi, world! Hi, world!'

在这里插入图片描述


🎯slice() 方法

slice(start, end) 方法用于提取字符串中指定起始位置到结束位置之间的部分,返回新字符串。

const str = 'Hello, world!';
console.log(str.slice(7, 12)); // 'world'

在这里插入图片描述


🎯substring() 方法

substring(start, end) 方法与 slice() 方法类似,用于提取字符串中指定起始位置到结束位置之间的部分,返回新字符串。

const str = 'Hello, world!';
console.log(str.substring(7, 12)); // 'world'

在这里插入图片描述


🎯split() 方法

split(separator, limit) 方法用于将一个字符串分割成数组,根据指定的分隔符进行分割,并可指定返回的数组长度限制。

const str = 'apple,banana,orange';
console.log(str.split(',')); // ['apple', 'banana', 'orange']
console.log(str.split(',', 2)); // ['apple', 'banana']

在这里插入图片描述


🎯charAt() 方法

charAt(index) 方法用于获取指定索引位置的字符。

const str = 'Hello, world!';
console.log(str.charAt(7)); // 'w'

在这里插入图片描述


🎯charCodeAt() 方法

charCodeAt(index) 方法用于获取指定索引位置的字符的 Unicode 编码。

const str = 'Hello, world!';
console.log(str.charAt(7)); // 'w'
console.log(str.charCodeAt(7)); // 119

在这里插入图片描述


📝最后

到此文章就是文章的全部内容了,这些是 ES6 新增的一些常用字符串方法,它们可以帮助你更轻松地处理和操作字符串。使用这些方法,你可以更高效地编写 JavaScript 代码。希望这篇博客对你有所帮助!
在这里插入图片描述

更多推荐

【数据结构】优先级队列(堆)

文章目录💐1.优先级队列1.1概念💐2.堆的概念及存储方式2.1什么是堆2.2为什么要用完全二叉树描述堆呢?2.3为什么说堆是在完全二叉树的基础上进行的调整?2.4使用数组还原完全二叉树💐3.堆的常用操作-模拟实现3.1堆的创建3.1.1堆的向下调整(大根堆为例)3.1.2建堆的时间复杂度3.2堆的插入和删除3.

mysql主从复制

为什么要搭建主从架构主库出现问题,可以快速切换到从库提供服务。读写分离,降低主库的访问压力。可以在从库中执行备份,以避免备份期间影响主库的服务。主从复制原理Master将数据变化记录到binlog。Slaver通过一个IO线程来拉取Master上的binlog,写到relaylog中。Slaver的Sql线程将rela

堆的介绍与堆的实现和调整

个人主页:Lei宝啊愿所有美好如期而遇目录​​堆的介绍:关于堆的实现及相关的其他问题:堆的初始化:堆的销毁:插入建堆:堆向上调整:交换两个节点的值:堆向下调整:删除根节点:求堆顶数据:打印堆的每一个节点的值:堆排序:堆的节点数量:判断堆是否为空:创建一个多数据文件:TopK问题(综合):向上/向下调整建堆哪个时间复杂度

24 DRF详细学习篇章一|Requests|Responses|View|Routers

文章目录快速入门你可能搞混的知识重写preform_与重写saveRequests请求原本的Django的request(⭐).data(⭐⭐⭐).query_params(⭐⭐⭐).parsers(⭐).accepted_renderer(⭐⭐).accepted_media_type(⭐⭐).user(⭐⭐⭐).a

Mybatis学习笔记5 面向接口CRUD练习

Mybatis学习笔记4用javassist动态实现DAO接口基于接口的CRUD_biubiubiu0706的博客-CSDN博客新建项目大致目录结构核心配置文件日志配置文件,只需要引入logback依赖配置文件名为logback.xml即可<?xmlversion="1.0"encoding="UTF-8"?><con

【数据结构】LinkedList与链表

文章目录1.ArrayList的缺陷2.链表2.1链表的概念及结构2.2链表的实现1.链表的功能2.初始化链表3.实现功能接口3.1头插添加元素3.2尾插法添加新元素3.3找到下标的前驱节点3.4指定位置插入元素3.5指定元素是否存在3.6找到指定元素的前驱节点3.7删除指定节点3.8删除所有元素为key的节点3.9链

智慧养殖:浅谈视频监控与AI智能识别技术助力奶牛高效、智慧养殖

一、方案背景随着科技的飞速发展,智能化养殖逐渐成为现代畜牧业的发展趋势。人工智能技术、物联网、视频技术、云计算、大数据等新兴技术,正在为奶牛养殖业带来全新的变革。越来越多的牧场、养殖场开始运用新技术来进行智能监管、提高生产效率、降低生产成本,助力饲养成本高的养殖业,向数字化、智能化、无人化发展方向转型。二、方案概述TS

计算机硬件设备和网络硬件设备

计算机硬件设备计算机硬件设备是指构成计算机系统的各种实体部件,包括以下几类常见设备:1、中央处理器(CentralProcessingUnit,CPU)2、内存(RandomAccessMemory,RAM)3、硬盘驱动器(HardDiskDrive,HDD)4、显卡(GraphicsProcessingUnit,GP

uni-app 之 vue位置怎样设置

vue位置怎样设置VUE是一款流行的JavaScript框架,可以构建动态用户界面。在VUE中,位置的设置是非常重要的,因为它会影响到页面元素的布局。下面将详细介绍VUE中位置设置的基本概念以及如何使用VUE进行位置设置。在VUE中,位置设置一般使用CSS的position属性来实现。position属性有四个属性值:

Spring Boot魔法:简化Java应用的开发与部署

文章目录什么是SpringBoot?1.自动配置(Auto-Configuration)2.独立运行(Standalone)3.生产就绪(ProductionReady)4.大量的起步依赖(StarterDependencies)SpringBoot的魔法1.起步依赖(StarterDependencies)2.自动配

CMake:测试的其他补充(重要)

CMake:测试的其他补充(重要)导言预期测试失败项目结构CMakeLists.txt相关源码输出结果使用超时测试运行时间过长的测试项目结构CMakeLists.txt相关源码输出结果并行测试项目结构CMakeLists.txt相关源码输出结果运行测试子集项目结构CMakeLists.txt相关源码输出结果使用测试固件

热文推荐