javaScript中字符串常见方法你了解多少?

571 阅读3分钟

(一)toLowerCase && toUpperCase

解释:toLowerCase 该方法可以将字符串中所有大写字母转化成小写,返回对应的字符。toUpperCase 该方法可以将字符串中所有小写字母转化成大写,返回对应的字符。

语法:字符串.toLowerCase() 字符串.toupperCase()

const str = "Hello Jack"; 
console.log(str.toLowerCase()); // hello jack 
console.log(str.toUpperCase()); // HELLO TONY

(二)trim && trimStart && trimEnd

解释:ES2019 对字符串实例新增了 trimStart()方法。它的行为与trim()一致,trimStart()消除字符串头部的空格,返回新字符串,不会修改原始字符串。trimEnd()消除字符串尾部的空格,返回新字符串,不会修改原始字符串。

语法:字符串.trim() ;字符串.trimStart() ;字符串.trimEnd()

const str = " Hello World "; 
console.log(str.trim()); //"Hello World" 
console.log(str.trimStart()); // 'Hello World ' 
console.log(str.trimEnd()); // ' Hello World'

(三)replace && replaceAll

解释:replace 是替换字符串中的第一个字符片段,返回替换后的字符串。replaceAll 是ES2021 提出的,与 replace 相似,replace 只能替换第一个匹配的字符,replaceAll 可以一次性替换所有匹配的字符, 在 replaceAll 没有出现之前,需要使用正则表达式中的g修饰符,使用 replaceAll 更加简洁美观。

语法:字符串.replace('换下内容','换上内容')字符串.replaceAll('换下内容','换上内容')

const str = "Hello World"; 
console.log(str.replace("o", "__"));   // Hell__ World 
console.log(str.replaceAll('o','__')); // Hell__ W__rld 

// 使用正则表达式实现同样效果 
console.log(str.replace(/o/g,'__')); // Hell__ W__rld

(四)split

解释:将字符串转化成数组,传递字符串的分隔符,返回转化后的数组

语法:字符串.split('分隔符')

const str = "2022-2-22"; 
console.log(str.split()); // ['2022-2-22'] 
console.log(str.split("")); // ['2', '0', '2', '2', '-', '2', '-', '2', '2'] 
console.log(str.split("-")); // ['2022', '2', '22']

(五) substr && substring && slice

解释:substr 截取字符串中的某一段字符,传入两个参数,分别是截取的开始下标和截取的长度,而substingslice 是截取的开始下标和结束下标。

语法:字符串.substr('开始下标','截取长度') 字符串.substring('开始下标','结束下标')字符串.slice('开始下标','结束下标')

const str = "Hello World"; 
console.log(str.substr(1, 3)); // ell 
console.log(str.substring(1, 3)); // el 
console.log(str.slice(1, 3)); // el

(六)repeat

解释:repeat 方法也是 ES6 中提出的,表示原字符串重复多少次,返回新的字符串。

语法:字符串.repeat(重复的次数)

const str = "Hello"; 
console.log(str.repeat(3)); //HelloHelloHello

(七) padStart && padEnd

解释:padStartpadEndES2017 提出的新的方法,表示在字符串的开始位置或者结束位置补全某段字符。

语法:字符串.padStart('需要返回的字符串长度','需要补齐的字符')字符串.padEnd('需要返回的字符串长度','需要补齐的字符')

const str = "World"; 
// 在字符串的开始位置补齐 
console.log(str.padStart(10, "哈喽")); // 哈喽哈喽哈World 

// 在字符串的末尾补齐 
console.log(str.padEnd(9, "哈喽")); // World哈喽哈喽 

// 当第一个参数大于字符串本身的长度且没有传入第二个参数,则补全的部分用空格代替 
console.log(str.padStart(10)); // ' world' 

// 当传入的第一个参数小于字符串本身,返回原字符串 
console.log(str.padEnd(1, "哈喽")); // World

(八)charAt && indexOf && includes && startsWith && endsWith

解释:charAt 获取字符串中下标对应的字符,输入对应的下标,返回对应的字符串字符,如果下标不存在,则返回空。传统中我们使用 indexOf 查找一段字符是否存在另一段字符串中,如果找到则返回下标,并且中断继续查找,找不到返回-1。 ES6 中提供了三个新的方法,分别是 includesstartsWithendWith

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
const str = "Hello World"; 
console.log(str.charAt(1)); //e 
console.log(str.indexOf("l")); //2 
console.log(str.includes("aa")); //false 
console.log(str.startsWith("Hell")); //true 
console.log(str.endsWith("orld")); //true