【前端】快速了解 ES6 新增字符串方法,开箱即用(含案例)
📋前言
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
猜你喜欢
- 【前端】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.
- 【前端】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
- 【前端】全栈软件开发工程师需要具备哪些技能
- 全栈软件开发工程师需要具备前端、后端和数据库等多方面的技能,以便能够在整个应用开发周期中承担各种任务。以下是典型的全栈软件开发工程师的技能栈:一、前端技能:1.HTML/CSS/JavaScript:构建网页的基本技能,负责页面结构、样式和交互。2.前端框架:掌握至少一种前端框架,如 React.js、Vue.js、Angular,用于构建可维护的、高性能的前端应用。3.前端工具:使用构建工具(Webpack、Parcel)、包管理工具(npm、Yarn)、代码规范工具(ESLint、Prett
- 【前端】如何使用Redis和TypeScript开发高性能计算功能
- 如何使用Redis和TypeScript开发高性能计算功能概述:Redis是一个开源的内存数据结构存储系统,具有高性能和可扩展性的特点。TypeScript是JavaScript的超集,提供了类型系统和更好的开发工具支持。结合Redis和TypeScript,我们可以开发出高效的计算功能来处理大数据集,并充分利用Redis的内存存储和计算能力。本文将介绍如何利用Redis和TypeScript开发高性能计算功能,包括数据存储、数据处理和结果缓存等方面。我们将使用Redis的常用数据结构和命令,并
- 【前端】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
- 【前端】微信小程序跳转公众号的三种方式
- 最近因为项目需要,要在小程序页面添加按钮,点击跳转公众号对应页面,目前没有直接点击按钮从小程序跳转到公众号页面的方法,但也有变相的实现方法,最后采用小程序webview内嵌公众号页面的方法来实现相关功能,在此记录一下:相关参考:小程序跳转公众号的三种方法 | 微信开放社区 (qq.com)开放能力 / official-account (qq.com)方法: 1: 公众号组件<official-account></official-account>
- 【前端】PHP、Vue和React:如何选择最适合的前端框架?
- PHP、Vue和React:如何选择最适合的前端框架?随着互联网技术的不断发展,前端框架在Web开发中起着至关重要的作用。PHP、Vue和React作为三种具有代表性的前端框架,每一种都具有其独特的特点和优势。在选择使用哪种前端框架时,开发人员需要根据项目需求、团队技能和个人偏好做出明智的决策。本文将通过比较PHP、Vue和React这三种前端框架的特点和使用场景,帮助读者更好地选择最适合自己的前端框架。PHPPHP作为一种服务器端脚本语言,被广泛应用于Web开发中。尽管PHP主要用于后端开发,
- 【HTML】html使用高德地图设置考勤范围
- 需求:系统需要考勤功能,并在WEB端设置考勤范围,用于员工手机端再次范围内打卡签到,WEB端需要设置考勤地点以及考勤范围。1 使用高德地图开发首先需要再高德开放平台注册账号,并创建应用,获取高德地图key以及安全秘钥这里需要用到地图定位,一级地理坐标转换,使用高德开放平台JSAPI开发。HTML引入js,安全秘钥配置一定要写在js上方:<script> window._AMapSecurityConfig = { &