js 好用的字符操作方法

序:突然感觉有些方法常见有时也用,但怕有时不记得,顺便记录一下!

一、获取类方法

javascript 复制代码
let str = "Hello,你们好!"
console.log(str.charAt(6))       // 你
console.log(str.charAt(12))      // (空字符串)

console.log(str.charCodeAt(2))   // 108
console.log(str.charCodeAt(12))  // NaN

console.log(String.fromCharCode(97,98,99,100))  // abcd

1)charAt()

charAt()方法可用来获取指定位置的字符串,index为字符串索引值,index的范围从0开始到string.length--1,若不在这个范围将返回一个空字符串。

2)charCodeAt()

charCodeAt()方法可返回指定位置的字符的Unicode编码

3)fromCharCode()

fromCharCode()可接受一个或多个Unicode值,然后返回一个字符串。

二。查找类方法

javascript 复制代码
let str = "Hello,你们好!"
console.log(str.indexOf("l"))     // 2
console.log(str.indexOf("l",3))   // 3
console.log(str.indexOf("f"))     // -1

console.log(str.lastIndexOf("l")) // 3
console.log(str.lastIndexOf("f")) // -1

console.log(str.search("l"))      // 2
console.log(str.search("f"))      // -1
console.log(str.search(/Llo/i))   // 2

console.log(str.match("你们好"))  // ["你们好", index: 6, input: "Hello,你们好!", groups: undefined]
console.log(str.match(/\w/))      // ["H", index: 0, input: "Hello,你们好!", groups: undefined]
console.log(str.match("哈哈"))    // null

1)indexOf()

indexOf()用来检索指定的字符串值在字符串中首次出现的位置。

2)lastIndexOf()

lastIndexOf()语法与indexOf()类似,它返回的是一个指定的子字符串值最后出现的位置,其检索顺序是从后向前,没有找到则返回-1。

3)search()

search()方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。它会返回第一个匹配的子字符串的起始位置,如果没有匹配的,则返回-1。

4)match()

match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

三、截取类方法

javascript 复制代码
let str = "Hello,你们好!"
console.log(str.substring(2,5))  // llo
console.log(str.substring(2))    // llo,你们好!

console.log(str.substr(2,5))     // llo,你
console.log(str.substr(-2,3))    // 好!

console.log(str.slice(2,5))      // llo
console.log(str.slice(-5,-2))    // ,你们

1)substring()

substring()是最常用到的字符串截取方法,它可以接收两个参数(参数不能为负值 ),分别是要截取的开始位置和结束位置,它将返回一个新的字符串,其内容是从start处到end-1处的所有字符。

2)substr()

substr()方法可在字符串中抽取从start下标开始的指定数目的字符。

3)slice()

slice()方法与substring()方法非常类似,它传入的两个参数也分别对应着开始位置和结束位置。

四、其他字符串方法

javascript 复制代码
let str = "Hello,你们好!"
console.log(str.replace("你们","大家")) // Hello,大家好!
console.log(str.replace(/\w/,"*"))     // *ello,你们好!
console.log(str.replace(/\w/g,"*"))    // *****,你们好!

console.log(str.split(","))            // ["Hello", "你们好!"]

console.log(str.toLowerCase())         // hello,你们好!
console.log(str.toUpperCase())         // HELLO,你们好!

console.log(str.concat("去哪!"))       // Hello,你们好!去哪!

1)replace()

replace()方法用来进行字符串替换操作,它可以接收两个参数,前者为被替换的子字符串(可以是正则表达式),后者为用来替换的文本。

2)split()

split()方法用于把一个字符串分割成字符串数组。

3)toLowerCase() 和 toUpperCase()

toLowerCase()方法可以把字符串中的大写字母转换为小写,toUpperCase()方法可以把字符串中的小写字母转换为大写。

4)concat()

concat() 方法用于连接两个或多个字符串,相当于"+"运算符。

5)padStart() 和 padEnd()

复制代码
str.padStart(targetLength, padString) 
  • targetLength:目标字符串的长度。
  • padString:用于填充的字符串。如果省略,默认使用空格填充。
javascript 复制代码
const str = "hello";
const t1 = str.padStart(10, false);// 结果:'falsehello'
const t2 = str.padStart(10, null); // 结果:'nullnhello'
const t3 = str.padStart(10, []);   // 结果:'hello',因为[]转换成字符串是空字符串
const t4 = str.padStart(10, {});   // 结果:'[objehello'
console.log("打印",t1,t2,t3,t4);
const t21 = str.padEnd(10, false);// 结果:'hellofalse'
const t22 = str.padEnd(10, null); // 结果:'hellonulln'
const t23 = str.padEnd(10, []);   // 结果:'hello',因为[]转换成字符串是空字符串
const t24 = str.padEnd(10, {});   // 结果:'hello[obje'
console.log("打印2",t21,t22,t23,t24);

padEnd() 顾名思义与 padStart() 相反,padStart() 填充的在前,padEnd() 填充的在后;

6)trim()、trimStart() 和 trimEnd()

trimLeft() 方法是trimStart() 方法的别名。 trimLeft() 具有与 trimLeft() 方法相同的功能。 建议您使用 trimStart() 方法。

trimRight() 方法是trimEnd() 方法的别名。 trimRight() 提供与 trimRight() 方法相同的功能。 但是,建议您使用 trimEnd() 方法。

javascript 复制代码
const str = "   hello world   ";
const start = str.trimStart();
const left = str.trimLeft();
const center = str.trim();
const end = str.trimEnd();
const right = str.trimRight();
console.log("打印",{start,left,center,end,right})
// 打印 {start: "hello world  ", left: "hello world  ", center: "hello world", end: "   hello world", right: "   hello world"}
相关推荐
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试