🔥JS字符串常用方法,拿下!!

字符串常用方法

1.charAt()

返回指定索引位置处的字符。类似于数组用中括号获取相应下标位置的数据。

js 复制代码
var str = 'Winie'
console.log(str.charAt(2)) // 输出 'n' 
console.log(str[2]) // 输出 'n' 
2.concat()

类似数组的concat(),用来返回一个合并拼接两个或两个以上字符串。原字符串不变

js 复制代码
const str1 = 'hello'
const str2 = 'Katrina'
const str3 = str1.concat(str2)
console.log(str3) // 输出 'helloKatrina'
3.indexOf()、lastIndexOf()

indexOf,返回一个字符在字符串中首次出现的位置,lastIndexOf返回一个字符在字符串中最后一次出现的位置。

js 复制代码
const str = 'Winnie'
console.log(str.indexOf('n')) // 输出 '2'
console.log(str.lastIndexOf('n')) // 输出 '3'
4.slice()

提取字符串的片断,并把提取的字符串作为新的字符串返回出来。原字符串不变。

js 复制代码
const str = 'abcdefg'
console.log(str.slice()) // 输出 'abcdefg', 不传递参数默认复制整个字符串
console.log(str.slice(1)) // 输出 'bcdefg',传递一个,则为提取的起点,然后到字符串结尾
console.log(str.slice(2, str.length-1)) // 输出'cdef',传递两个,为提取的起始点和结束点
5.split()

使用指定的分隔符将一个字符串拆分为多个子字符串数组并返回,原字符串不变。

js 复制代码
const str = 'A*B*C*D*E*F*G'
console.log(str.split('*')) // 输出 ["A", "B", "C", "D", "E", "F", "G"]
6.substr(), substring()
  • 这两个方法的功能都是截取一个字符串的片段,并返回截取的字符串。
  • substrsubstring这两个方法不同的地方就在于参数二,substr的参数二是截取返回出来的这个字符串指定的长度substring的参数二是截取返回这个字符串的结束点 ,并且不包含这个结束点。而它们的参数一,都是一样是截取的起始位置
  • 注意事项substr的参数二如果为0或者负数,则返回一个空字符串,如果未填入,则会截取到字符串的结尾去。substring的参数一和参数二为NAN或者负数,那么它将被替换为0
js 复制代码
const str = 'ABCDEFGHIJKLMN'
console.log(str.substr(2))  // 输出 'CDEFGHIJKLMN'
console.log(str.substring(2)) // 输出 'CDEFGHIJKLMN'

console.log(str.substr(2, 9))  // 输出 'CDEFGHIJK'
console.log(str.substring(2, 9))  // 输出 'CDEFGHI'
7.match()

match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,并返回一个包含该搜索结果的数组。

js 复制代码
const str = '2018年结束了,2019年开始了,2020年就也不远了'
const reg = /\d+/g  // 这里是定义匹配规则,匹配字符串里的1到多个数字
console.log(str.match(reg))  // 输出符合匹配规则的内容,以数组形式返回 ['2018', '2019', '2020']
console.log(str.match('20'))  // 不使用正则 ["20", index: 0, input: "2018年结束了,2019年开始了"]

注意事项 :如果match方法没有找到匹配,将返回null。如果找到匹配,则 match方法会把匹配到以数组形式返回,如果正则规则未设置全局修饰符g,则 match方法返回的数组有两个特性:inputindexinput属性包含整个被搜索的字符串。index属性包含了在整个被搜索字符串中匹配的子字符串的位置。

8.replace()

replace接收两个参数,参数一是需要替换掉的字符或者一个正则的匹配规则 ,参数二是需要替换进去的字符,参数二,也可以是一个回调函数。

js 复制代码
const str = '2018年结束了,2019年开始了,2020年就也不远了'
const rex = /\d+/g  // 这里是定义匹配规则,匹配字符串里的1到多个数字
const str1 = str.replace(rex, '****') 
console.log(str1) // 输出:"****年结束了,****年开始了,****年也不远了"
const str2 = str.replace(rex, function(item){
    console.log(arguments)  // 看下面的图片
    const arr = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
    let newStr = ''
    item.split('').map(function(i){
            newStr += arr[i]
    })					
    return newStr       
})
console.log(str2) // 输出:贰零壹捌年结束了,贰零壹玖年开始了,贰零贰零年也不远了
9.search()

在目标字符串中搜索与正则规则相匹配的字符,搜索到,则返回第一个匹配项在目标字符串当中的位置 ,没有搜索到则返回一个-1

js 复制代码
const str = '2018年结束了,2019年开始了,2020年就也不远了'
const reg = /\d+/i  // 这里是定义匹配规则,匹配字符串里的1到多个数字
console.log(str.search(reg)) // 输出 0  这里搜索到的第一项是从位置0开始的
10.toLowerCase(),toUpperCase()

toLowerCase把字母转换成小写,toUpperCase()则是把字母转换成大写。

js 复制代码
const str1 = 'winnie'
const str2 = 'WINNIE'
console.log(str2.toLowerCase())  // 输出:'winnie'
console.log(str1.toUpperCase())  // 输出:'WINNIE'
11.includes(), startsWith(), endsWith()

includesstartsWithendsWithes6的新增方法

includes 用来检测目标字符串对象是否包含某个字符,返回一个布尔值 startsWith用来检测当前字符是否是目标字符串的起始部分、n endwith是用来检测是否是目标字符串的结尾部分。

js 复制代码
const str = 'Excuse me, how do I get to park road?'
console.log(str.includes('how')) // 输出:true
console.log(str.startsWith('Excuse')) // 输出: true
console.log(str.endsWith('?')) // 输出: true
12.repeat()

返回一个新的字符串对象,新字符串等于重复了指定次数的原始字符串。接收一个参数,就是指定重复的次数。原字符串不变。

js 复制代码
const str = 'ha'
const str2 = str.repeat(3)
console.log(str) // 输出:'ha'
console.log(str2) // 输出:'hahaha'
相关推荐
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui
尝尝你的优乐美6 小时前
vue3.0中h函数的简单使用
前端·javascript·vue.js
windy1a7 小时前
【C语言】js写一个冒泡顺序
javascript
会发光的猪。7 小时前
如何使用脚手架创建一个若依框架vue3+setup+js+vite的项目详细教程
前端·javascript·vue.js·前端框架