字符串方法

简介: 字符串方法

判断字符串是否包含在另一个字符串中


let s = 'Hello world'
/* 参数字符串是否在原字符串的头部 返回布尔值 */
s.startsWith('Hello'); // true
/* 参数字符串是否在原字符串的尾部 返回布尔值 */
s.endsWith('world');  // true
/* 字符串是否包含参数字符串 */
s.includes('w');  // true


startsWith,endsWith,includes都支持第二个参数,表示开始搜索的位置

let w = '东方不败'

索引从0开始

w.startsWith('方',1);  // true
w.endsWith('方',2);   // true
/* includes第二个参数表示从指定下标开始向后寻找,返回布尔值 */
w.includes('不败',2);  // true
w.includes('不败',3);  // false

repeat()

repeat()方法返回新的字符串,并将原字符串重复 n

let a = 'hello'
a.repeat(3);   // hellohellohello 重复3次
'w'.repeat(2);  // ww 重复2次
a.repeat(0);  // ""  字符串置空
a.repeat(2.7); // 如果是小数则取整  重复2次

如果是负数或者Infinity则报错

let a = 'hello'
a.repeat(Infinity);   // 报错
a.repeat(-1);  // 报错
let a = 'hello'
a.repeat(-0.9); // 如果参数是0~-1之间的小数,因为会取整,所以是0 ""
a.repeat(NaN);  // 参数是NaN等于0   ""
a.repeat('he');  // ""  如果参数是字符串则输出空值
a.repeat('2'); // 参数如果是字符串,会先转换数字

padStart() padEnd() 字符串补全


padStart() 头部补全

padEnd() 尾部补全

let b = 'how'
b.padStart(5,'aa'); // 字符串长度补到5位,在how头部补全aa
b.padStart(5,'aba'); // 字符串长度补到5位,在how头部补全ab,补全的字符串超出会被截取
b.padEnd(5,'aa');  // 字符串长度补到5位,在how尾部补全aa
b.padEnd(5,'aba'); // 字符串长度补到5位,在how尾部补全ab,补全的字符串超出会被截取
b.padStart(5);  // 如果省略第二个参数则用空格代替  "   how"
b.padEnd(5);  // 如果省略第二个参数则用空格代替  "how   "

padStart常见的使用场景:

'1'.padStart(5,'0');  // 补全数字  00001
'09-12'.padStart(10,'YYYY-MM-DD');  // 提示字符串格式 YYYY-09-12,将YYYY-MM-DD补全到09-12头部,保留10位字符,剩余的截取掉

消除字符串空格

let s = ' abc  '
s.trim();  // 消除首尾空格   'abc'
s.trimStart();  // 消除头部空格  'abc  '
s.trimEnd();  // 消除尾部空格 '  abc'

replaceAll()

es6之前,replace字符串替换只能替换匹配的一个,如果字符串中有多个字符匹配,只替换第一个,批量匹配则需要在匹配的后面加上 g

一般使用的replace() 只能替换第一个匹配的字符

'hello'.replace('l','o');  // heolo  只替换了第一个

如果要匹配所有,就需要使用正则表达式的 g 修饰符

'hello'.replace(/l/g,'o');  // heooo  替换所有

在此基础上,这里提供了一个更加方便的方法,es2021引入了replaceAll(),可以匹配所有并替换

let r = 'green'
r.replaceAll('e','n');  // grnnn  匹配所有e替换为n
console.log(r);  // green  // 前面的替换不会影响原字符

需要注意的是,replace和replaceAll()会返回新的字符,不会影响原字符

console.log('hello'.replaceAll(/l/,'o'));   // 报错

replaceAll()为替换所有,如果在第一个参数中使用正则表达式,需要/g,g为全局,否则报错


replaceAll()特殊字符串

replaceAll()接收两个参数,第二个参数可以是字符串,在字符串的基础上,这里提供了一些特殊字符串

字符 说明
$& 匹配的字符串
$` 匹配结果前面的文本
$’ 匹配结果后面的文本
$n 匹配成功的n组内容,n是从1开始的自然数。这个参数生效的前提是,第一个参数必须是正则表达式。
$$ 指代美元符号$
'hello'.replaceAll('e', '$&'); // hello 返回结果与原字符一致
'hello'.replaceAll('l', '$`'); // hehehelo 将l替换成l前面的字符,这里有两个l,第一个l被替换成he,第二个l被替换成hehe
'hello'.replaceAll('l', `$'`); // helooo 将l替换成l后面的字符,这里有两个l,第一个l被替换成lo,第二个l被替换成o
'hello'.replaceAll(/(he)(llo)/g,'$2$1') //llohe $后面的x就是第几个匹配, $2等于llo $1等于el,这里相当于是吧llo放到了前面,he放到了后面,这种匹配方式必须是字符串的等长匹配,如果是/(he)(lo)/g,'$2$1'不会生效,因为匹配的字符串长度与原字符串长度不符。

replaceAll()组和函数匹配

replaceAll()的第二个参数可以是一个函数

'hello'.replaceAll('l', () => 'o'); // heooo 替换所有的l为o

既然replaceAll()的第二个参数可以是一个函数,那么就可以在这个函数上做其它操作,我们可以在参数匹配的条件上做函数操作,这里演示一下组和函数匹配

let str = '123hello456'
let regex = /(\d+)([a-z]+)(\d+)/g // 有三个组,组1匹配数字,组2匹配字母,组3匹配数字
// all为传入的字符串123hello456,z1\z2\z3为对应的组也就是regex内的(\d+)、([a-z]+)、(\d+)
function replacer(all, z1, z2, z3, offset, string) {
         return [z1, z2, z3].join('-') // 将匹配的内容用 - 连接
        }
let re = str.replaceAll(regex, replacer)
console.log(re); //123-hello-456

这个替换函数可以接受多个参数。第一个参数是捕捉到的匹配内容,第二个参数捕捉到是组匹配(有多少个组匹配,就有多少个对应的参数)。此外,最后还可以添加两个参数,倒数第二个参数是捕捉到的内容在整个字符串中的位置,最后一个参数是原字符串。


at

根据at的下标来匹配输出。

at参数为正数时,从字符串的头部开始,起始值是0

at负数时,从字符串的末尾开始,起始值是1

'hello'.at(2); // 输出l 字符串中第0位开始,输出下标2的字符
'hello'.at(-1); // 输出o,从末尾开始,第1位开始,输出下标1的字符

案例源码:https://gitee.com/wang_fan_w/es6-science-institute

如果觉得这篇文章对你有帮助,欢迎点亮一下star哟

目录
相关文章
|
5月前
|
存储 算法 编译器
|
4月前
|
JavaScript 前端开发 API
|
3月前
|
存储 编译器
字符串
字符串。
11 1
|
6月前
|
JSON 数据格式
json对象转字符串和字符串转对象的方法
json对象转字符串和字符串转对象的方法
42 0
|
9月前
|
索引 Python
字符串的相关方法和操作
字符串的相关方法和操作
63 0
|
10月前
|
JavaScript
常用的数组(字符串)方法有哪些?(一)
1.pop:末位删除,即删除数组的最后一项,返回值是被删除项。 2.shift:首位删除,即删除数组的第一项,返回值是被删除项。 3.splice:指定下标删除元素,返回被删除的元素。第一个参数是从下标几开始删除,第二个参数是删除几个,第三个参数是要插入的元素。splice方法是会改变原数组的。删除功能用的比较多,我个人更喜欢用filter来变相实现删除,splice是会改变原数组的,而filter不会
|
10月前
常用的数组(字符串)方法有哪些?(二)
concat:合并数组或者字符串,concat在项目中用的还是比较多的,最经典的就是一个表格数据是有两个或者三个数组组成的时候会用到,watch监听数组和concat结合使用。下期做一个例子。
|
10月前
常用的数组(字符串)方法有哪些?(三)
some:判断数组中有没有符合条件的元素,一个符合的都没有返回false,有一个就是true。
|
11月前
|
C++
C++(字符串总结)
C++(字符串总结)
|
JavaScript 前端开发
使用字符串方法
使用字符串方法
58 0