您的当前位置:首页>全部文章>文章详情

【前端】快速了解 ES6 新增字符串方法,开箱即用(含案例)

CrazyPanda发表于:2023-12-10 23:10:25浏览:325次TAG:




1.jpeg

📋前言

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

1.png


🎯startsWith() 方法

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

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

1.png


🎯endsWith() 方法

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

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

1.png


🎯repeat() 方法

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

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

1.png


🎯padStart() 方法

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

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

1.png


🎯padEnd() 方法

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

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

1.png


🎯trim() 方法

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

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

1.png


🎯trimStart() 或 trimLeft() 方法

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

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

1.png


🎯trimEnd() 或 trimRight() 方法

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

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

1.png


🎯replaceAll() 方法

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

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

1.png


🎯slice() 方法

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

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

1.png


🎯substring() 方法

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

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

1.png


🎯split() 方法

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

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

1.png


🎯charAt() 方法

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

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

1.png


🎯charCodeAt() 方法

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

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

1.png


猜你喜欢

【前端】html Antv L7 + mapbox 实现3D地图 3D中国地图 不限于中国地图
echarts的3D地图实在太丑了,还一堆bug使用阿里的Antv可视化库L7,实现3D地图,底图是mapbox 参考示例:https://l7.antv.antgroup.com/zh/examples/polygon/3d#floatMap如果不需要底图样式,可把Scene的style设置为blank 直接上代码了,vue的就不说了,项目是html的mapbox依赖<script src='https://api.mapbox.com/mapbox-gl-js/v2.
发表于:2024-01-18 浏览:446 TAG:
【前端】JavaScript判断数组对象是否含有某个值的方法(6种)
【JavaScript基础语法】web前端判断数组对象是否含有某个值的方法(6种)知识回调场景复现实现方式(6种)利用循环遍历数组元素利用some,filter方法利用array.indexOf方法利用array.includes方法利用array.find方法利用set中has方法本期小结知识回调文章内容文章链接vue3 antd table表格的增删改查(一)input输入框根据关键字搜索【后台管理系统纯前端filter过滤】https://blog.csdn.net/XSL_HR/arti
发表于:2024-02-23 浏览:347 TAG:
【前端】全栈软件开发工程师需要具备哪些技能
全栈软件开发工程师需要具备前端、后端和数据库等多方面的技能,以便能够在整个应用开发周期中承担各种任务。以下是典型的全栈软件开发工程师的技能栈:一、前端技能:1.HTML/CSS/JavaScript:构建网页的基本技能,负责页面结构、样式和交互。2.前端框架:掌握至少一种前端框架,如 React.js、Vue.js、Angular,用于构建可维护的、高性能的前端应用。3.前端工具:使用构建工具(Webpack、Parcel)、包管理工具(npm、Yarn)、代码规范工具(ESLint、Prett
发表于:2023-12-07 浏览:344 TAG:
【前端】如何使用Redis和TypeScript开发高性能计算功能
如何使用Redis和TypeScript开发高性能计算功能概述:Redis是一个开源的内存数据结构存储系统,具有高性能和可扩展性的特点。TypeScript是JavaScript的超集,提供了类型系统和更好的开发工具支持。结合Redis和TypeScript,我们可以开发出高效的计算功能来处理大数据集,并充分利用Redis的内存存储和计算能力。本文将介绍如何利用Redis和TypeScript开发高性能计算功能,包括数据存储、数据处理和结果缓存等方面。我们将使用Redis的常用数据结构和命令,并
发表于:2024-04-06 浏览:361 TAG:
【前端】vite和webpack的区别是什么
区别:1、webpack服务器启动速度比vite慢;由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。2、vite热更新比webpack快;vite在hrm方面,当某个模块内容改变时,让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖,而webpack基于node。4、vite的生态不及webpack,加载器、插件不够丰富。本教程操作环境:windows7系统、vue3版,DELL G3电脑。写在开头最近的vite比较火,而且发布了2.0版本,v
发表于:2024-04-18 浏览:359 TAG:
【前端】微信小程序跳转公众号的三种方式
 最近因为项目需要,要在小程序页面添加按钮,点击跳转公众号对应页面,目前没有直接点击按钮从小程序跳转到公众号页面的方法,但也有变相的实现方法,最后采用小程序webview内嵌公众号页面的方法来实现相关功能,在此记录一下:相关参考:小程序跳转公众号的三种方法 | 微信开放社区 (qq.com)开放能力 / official-account (qq.com)方法: 1:  公众号组件<official-account></official-account>
发表于:2024-03-20 浏览:310 TAG:
【前端】PHP、Vue和React:如何选择最适合的前端框架?
PHP、Vue和React:如何选择最适合的前端框架?随着互联网技术的不断发展,前端框架在Web开发中起着至关重要的作用。PHP、Vue和React作为三种具有代表性的前端框架,每一种都具有其独特的特点和优势。在选择使用哪种前端框架时,开发人员需要根据项目需求、团队技能和个人偏好做出明智的决策。本文将通过比较PHP、Vue和React这三种前端框架的特点和使用场景,帮助读者更好地选择最适合自己的前端框架。PHPPHP作为一种服务器端脚本语言,被广泛应用于Web开发中。尽管PHP主要用于后端开发,
发表于:2024-03-16 浏览:375 TAG:
【HTML】html使用高德地图设置考勤范围
需求:系统需要考勤功能,并在WEB端设置考勤范围,用于员工手机端再次范围内打卡签到,WEB端需要设置考勤地点以及考勤范围。1 使用高德地图开发首先需要再高德开放平台注册账号,并创建应用,获取高德地图key以及安全秘钥这里需要用到地图定位,一级地理坐标转换,使用高德开放平台JSAPI开发。HTML引入js,安全秘钥配置一定要写在js上方:<script>     window._AMapSecurityConfig = { &
发表于:2024-02-07 浏览:359 TAG:
【前端】vite+vue3+ts 项目安装 Ant Design of Vue方法
安装 Ant Design of Vue 和@ant-design/icons-vue图标库npm add ant-design-vue @ant-design/icons-vue安装插件 unplugin-vue-components 配合vite可以自动帮我们引入组件npm add unplugin-vue-components -D配置 vite.config.tsimport {&nbs
发表于:2024-02-23 浏览:313 TAG:
【Html】H5跳转支付宝小程序的两种方式
H5跳转支付宝小程序的两种方式,第一种方式还可以打开支付宝生活号网页,只是换成appid换成网页应用appid,page参数换成url参数,url对应的是自己页面的链接
发表于:2024-03-28 浏览:357 TAG: