js字符串方法速览---字符串的静态方法,实例方法和属性合集,各包含一个示例

tips:本文仅作为查找和基本使用的展示,需要深入了解这些方法的使用请参考:String - JavaScript | MDN (mozilla.org)

可以通过目录快速锁定需要查找的方法和查看它的使用

目录

tip:

新建一个字符串

字符串实例属性

字符串静态方法

 String.fromCharCode(...nums)

String.fromCodePoint(...nums)

String.raw({raw: arr},...str) 或者 String.raw`str\n${str}`

字符串实例方法

at(index)

charAt(index)

charCodeAt(index)

codePointAt(index)

concat(str1,str2,...)

endsWith(searchString,position)

includes(searchString,position)

 indexOf(searchString,position)

lastIndexOf(searchString,position)

isWellFormed()

toWellFormed()

 localeCompare(compareString[, locales[, options]])

match(regexp)

matchAll(regexp)

 padEnd(targetLength [, padString])

padStart(targetLength [, padString])

repeat(count)

replace(searchValue, newSubStr | function)

 replaceAll(searchValue, newSubStr | function)

search(searchValue)

slice(start, end)

split(separator, limit)

startsWith(searchString, position)

substring(start, end)

 [Symbol.iterator]()

toLocaleLowerCase()

toLocaleUpperCase()

toLowerCase()

toUpperCase()

trim()

 trimEnd()

trimStart()

valueOf()

完整代码展示


新建一个字符串

通过单双引号(字面量),new, String()强制转换,+ 字符拼接隐式转换

let str = '字符串'; // let str = "字符串"
let str1 = new String(1); // 传入一个任意类型值,使用构造函数的方式创建的字符串类型会被识别成对象类型
let str2 = String(Symbol('symbol')); // 强制转换成字符串,包括symbol类型,注意引用类型会被简化成[object xxx]的格式
let str3 = true + ''; // any + '' 将any隐式转换为字符串 

console.log(str,str1,str2,str3); // 字符串 [String: '1'] Symbol(symbol) true
console.log(typeof str,typeof str1,typeof str2,typeof str3); // string object string string

字符串实例属性

length 字符串长度

console.log("Hello".length); // 5

字符串静态方法

 String.fromCharCode(...nums)

将指定编号转成字符:接受多个整数参数(0~65535<0xFFFF>),返回由指定的 UTF-16 码元序列创建的字符串。

let codeStr = String.fromCharCode(72,69,76,76,79);
console.log(codeStr); // HELLO

String.fromCodePoint(...nums)

将根据指定的码位序列返回一个字符串:接受多个整数参数(0~65535<0xFFFF>),返回由指定的Unicode码位创建的字符串。

let codeStr1 = String.fromCodePoint(72,69,76,76,79);
console.log(codeStr1); // HELLO

String.raw({raw: arr},...str) 或者 String.raw`str\n${str}`

1.参数1是一个拥有raw属性的参数,它的值是一个类数组,后续参数会作为模板字符插入到类数组中并最终转成字符串

2.不需要括号,直接跟上一个模板字符串,结果会无视模板字符串中的转义字符

let rawStr = String.raw({raw: ['Hello','World','!']},1,2); //等价于`Hello${1}world${2}!` ,注意后面的参数应该少于前方类数组原始的个数,多的参数会被忽略
let rawStr1 = String.raw`Hello\nWorld`; // 无视\n转义字符

console.log(rawStr); // Hello1world2 
console.log(rawStr1); // Hello\nWorld

字符串实例方法

at(index)

接受一个数字(为负数则反向查找),返回字符串中指定数字位置的字符

console.log("Hello".at(1)); // e

charAt(index)

接受一个数字,返回字符串中指定数字位置的字符 类似at()但chartAt()接受长度以外的索引(包括负数)返回''空字符

console.log("Hello".charAt(1)); // e

charCodeAt(index)

接受一个数字,返回字符串中指定数字位置的字符的Unicode编码

console.log("Hello".charCodeAt(1)); // 101 (e)

codePointAt(index)

接受一个数字,返回字符串中指定数字位置的字符的Unicode编码

console.log("Hello".codePointAt(0)); // 72(H)

concat(str1,str2,...)

连接字符串,返回连接后的字符串,类似于+号连接字符串

console.log("Hello".concat(" ","World",'!')); // Hello World!

endsWith(searchString,position)

接受一个字符串和一个数字,返回布尔值,判断字符串是否以指定字符串在position(默认为字符串length长度值)位置结尾,区分大小写

console.log("Hello World".endsWith("World")); // true

console.log("Hello World".endsWith("Hello",5)); // true

includes(searchString,position)

接受一个字符串和一个数字,返回布尔值,判断字符串是否包含指定字符串在position(默认为0)位置开始,区分大小写

console.log("Hello World".includes("World")); // true

console.log("Hello World".includes("Hello",5)); // false

 indexOf(searchString,position)

接受一个字符串和一个数字,返回指定字符串在position(默认为0)位置开始第一次出现的索引,如果没有找到则返回-1

console.log("Hello World".indexOf("World")); // 6

console.log("Hello World".indexOf("Hello",5)); // -1

lastIndexOf(searchString,position)

接受一个字符串和一个数字,返回指定字符串在索引到position(默认无穷)位置时最后一次出现的索引,如果没有找到则返回-1

console.log("Hello World".lastIndexOf("World")); // 6

console.log("Hello World".lastIndexOf("Hello",5)); // 0

isWellFormed()

方法返回一个表示该字符串是否包含‘单独代理项’的布尔值。不常用忽略

toWellFormed()

方法返回一个表示该字符串是否包含‘单独代理项’的字符串。不常用忽略

 localeCompare(compareString[, locales[, options]])

返回一个数字,表示两个字符串在特定语言环境下的比较结果

console.log("abc".localeCompare("xyz")); // -1 abc在xyz之前

console.log("xyz".localeCompare("abc")); // 1 xyz在abc之后

console.log("abc".localeCompare("abc")); // 0 两个字符串相等(a,a)

match(regexp)

检索字符串与正则表达式进行匹配的结果, regexp一个正则表达式对象或者任何具有 Symbol.match 方法的对象。

console.log("Hello 123 World".match(/\d+/g)); // ["123"] ,匹配数字

matchAll(regexp)

方法返回一个包含所有匹配正则表达式的结果及其实际位置的可迭代对象。

let reg = "Hello 123 World 123".matchAll(/\d+/g); // 返回一个可迭代对象,包含所有匹配正则表达式的结果及其实际位置

console.log(reg.next().value); // ["123", index: 6, input: "Hello 123 World 123", groups: undefined]

console.log(reg.next().value); // ["123", index: 16, input: "Hello 123 World 123", groups: undefined]

normalize([form])

返回将字符中16进制编号转成字符后的字符串,form:是 "NFC"、"NFD"、"NFKC" 或 "NFKD" 其中之一,用于指定 Unicode 标准化形式。如果省略或为 undefined,则使用 "NFC"。

console.log("\uff05".normalize()); // %

 padEnd(targetLength [, padString])

在当前字符串尾部填充指定的字符串(默认为空字符' ')直到达到指定的长度。返回一个新的字符串。

console.log('hello'.padEnd(10)); // hello     ,在字符串尾部填充空格

console.log('hello'.padEnd(10,'-')); // hello-----,在字符串尾部填充'-'

padStart(targetLength [, padString])

在当前字符串头部填充指定的字符串(默认为空字符' ')直到达到指定的长度。返回一个新的字符串。

console.log('hello'.padStart(10)); //     hello ,在字符串头部填充空格

console.log('hello'.padStart(10,'-')); // ----hello ,在字符串头部填充'-'

repeat(count)

返回一个新的字符串,表示将当前字符串重复count次。

console.log('hello'.repeat(2)); // hellohello

replace(searchValue, newSubStr | function)

根据参数1的规则(通常时正则表达式)非正则时将匹配第一个位置的字符替换成参数2或参数2的返回值。返回一个新的字符串,不会改变原字符串

console.log('hello'.replace('e','a')); // hallo

console.log('hello'.replace('l','a')); // healo

console.log('hello'.replace(/o/g,'a')); // hella

 replaceAll(searchValue, newSubStr | function)

根据参数1的规则(通常时正则表达式)将匹配到的所有字符替换成参数2或参数2的返回值。返回一个新的字符串,不会改变原字符串

console.log('hello'.replaceAll('l','a')); // heaao

search(searchValue)

根据正则表达式返回匹配到的第一个位置,否则返回-1

console.log('hello'.search(/l/)); // 2

slice(start, end)

返回一个从start到end(不包括end)的子字符串。如果start或end是负数,则它们表示从字符串的末尾开始的位置。

console.log('hello'.slice(1,3)); // el

split(separator, limit)

根据参数1的规则(通常时正则表达式)将字符串分割成数组,参数2(可选)表示最多分割成多少个元素。返回一个数组

console.log('hello'.split('')); // ["h", "e", "l", "l", "o"]

console.log('hello'.split('l')); // ["he", "", "o"]

console.log('hello'.split(/e/)); // ["h", "llo"]

startsWith(searchString, position)

判断字符串是否以参数1的字符串开头,参数2(可选)表示从哪个位置开始判断。返回布尔值

console.log('hello'.startsWith('h')); // true

console.log('hello'.startsWith('e')); // false

console.log('hello'.startsWith('e', 1)); // true

substring(start, end)

返回一个从start到end(不包括end)的子字符串。substring() 方法从 indexStart 开始提取字符,直到(但不包括)indexEnd。

如果省略了 indexEnd,则 substring() 提取字符直到字符串的末尾。 如果 indexStart 等于 indexEnd,则 substring() 返回一个空字符串。如果 indexStart 大于 indexEnd,则 substring() 的效果就像交换了这两个参数一样

任何小于 0 或大于 str.length 的参数值都会被视为分别等于 0 和 str.length。 任何值为 NaN 的参数将被视为等于 0。

console.log('hello'.substring(1,3)); // el

console.log('hello'.substring(3,1)); // el

console.log('hello'.substring(3,3)); // ''

 [Symbol.iterator]()

返回一个新的迭代器对象,该对象遍历字符串值。字符串是一个可迭代对象

let iterator = 'hello'[Symbol.iterator]();

console.log(iterator.next().value); // h

console.log(iterator.next().value); // e

console.log(iterator.next().value); // l

toLocaleLowerCase()

将字符串转换为小写并返回。不会改变原字符串

console.log('HHHH'.toLocaleLowerCase()); // hhhh

toLocaleUpperCase()

将字符串转换为大写并返回。不会改变原字符串

console.log('hhhh'.toLocaleUpperCase()); // HHHH

toLowerCase()

将字符串转换为小写并返回。不会改变原字符串

console.log('Hello'.toLowerCase()); // hello

toUpperCase()

将字符串转换为大写并返回。不会改变原字符串

console.log('hello'.toUpperCase()); // HELLO

toString()

返回字符串表示

console.log('hello'.toString()); // hello

trim()

从字符串的两端删除空白字符并返回。不会改变原字符串

console.log(' hello '.trim()); // 'hello'

 trimEnd()

从字符串的末尾删除空白字符并返回。不会改变原字符串

console.log(' hello '.trimEnd()); // ' hello'

trimStart()

从字符串的开头删除空白字符并返回。不会改变原字符串

console.log(' hello '.trimStart()); // 'hello '

valueOf()

返回字符串的原始值,主要用来提取new 构造的String对象的字符值

let strVal = new String('hello');

console.log(strVal); // [String: 'hello']

console.log(strVal.valueOf()); // hello

完整代码展示

// 新建一个字符串 ,通过单双引号(字面量),new, String()强制转换,+ 字符拼接隐式转换
let str = '字符串'; // let str = "字符串"
let str1 = new String(1); // 传入一个任意类型值,使用构造函数的方式创建的字符串类型会被识别成对象类型
let str2 = String(Symbol('symbol')); // 强制转换成字符串,包括symbol类型,注意引用类型会被简化成[object xxx]的格式
let str3 = true + ''; // any + '' 将any隐式转换为字符串 

console.log(str,str1,str2,str3); // 字符串 [String: '1'] Symbol(symbol) true
console.log(typeof str,typeof str1,typeof str2,typeof str3); // string object string string

console.log("\n----------分割线----------\n");

// 字符串实例属性

// length 字符串长度
console.log("Hello".length); // 5
console.log("\n----------分割线----------\n");

// 字符串静态方法
// String.fromCharCode(...nums) 将指定编号转成字符:接受多个整数参数(0~65535<0xFFFF>),返回由指定的 UTF-16 码元序列创建的字符串。
let codeStr = String.fromCharCode(72,69,76,76,79);
console.log(codeStr); // HELLO

console.log("\n----------分割线----------\n");

// String.fromCodePoint(...nums) 将根据指定的码位序列返回一个字符串:接受多个整数参数(0~65535<0xFFFF>),返回由指定的Unicode码位创建的字符串。。
let codeStr1 = String.fromCodePoint(72,69,76,76,79);
console.log(codeStr1); // HELLO

console.log("\n----------分割线----------\n");

// String.raw({raw: arr},...str) 或者 String.raw`str\n${str}` 1.参数1是一个拥有raw属性的参数,它的值是一个类数组,后续参数会作为模板字符插入到类数组中并最终转成字符串
// 2.不需要括号,直接跟上一个模板字符串,结果会无视模板字符串中的转义字符 
let rawStr = String.raw({raw: ['Hello','World','!']},1,2); //等价于`Hello${1}world${2}!` ,注意后面的参数应该少于前方类数组原始的个数,多的参数会被忽略
let rawStr1 = String.raw`Hello\nWorld`; // 无视\n转义字符

console.log(rawStr); // Hello1world2 
console.log(rawStr1); // Hello\nWorld

console.log("\n----------分割线----------\n");

// 字符串实例方法

// at(index) 接受一个数字(为负数则反向查找),返回字符串中指定数字位置的字符,
console.log("Hello".at(1)); // e

console.log("\n----------分割线----------\n");

// charAt(index) 接受一个数字,返回字符串中指定数字位置的字符 类似at()但chartAt()接受长度以外的索引(包括负数)返回''空字符
console.log("Hello".charAt(1)); // e

console.log("\n----------分割线----------\n");

// charCodeAt(index) 接受一个数字,返回字符串中指定数字位置的字符的Unicode编码
console.log("Hello".charCodeAt(1)); // 101 (e)

console.log("\n----------分割线----------\n");

// codePointAt(index) 接受一个数字,返回字符串中指定数字位置的字符的Unicode编码
console.log("Hello".codePointAt(0)); // 72(H)

console.log("\n----------分割线----------\n");

// concat(str1,str2,...) 连接字符串,返回连接后的字符串,类似于+号连接字符串
console.log("Hello".concat(" ","World",'!')); // Hello World!

console.log("\n----------分割线----------\n");

// endsWith(searchString,position) 接受一个字符串和一个数字,返回布尔值,判断字符串是否以指定字符串在position(默认为字符串length长度值)位置结尾,区分大小写
console.log("Hello World".endsWith("World")); // true
console.log("Hello World".endsWith("Hello",5)); // true

console.log("\n----------分割线----------\n");

// includes(searchString,position) 接受一个字符串和一个数字,返回布尔值,判断字符串是否包含指定字符串在position(默认为0)位置开始,区分大小写
console.log("Hello World".includes("World")); // true
console.log("Hello World".includes("Hello",5)); // false

console.log("\n----------分割线----------\n");

// indexOf(searchString,position) 接受一个字符串和一个数字,返回指定字符串在position(默认为0)位置开始第一次出现的索引,如果没有找到则返回-1
console.log("Hello World".indexOf("World")); // 6
console.log("Hello World".indexOf("Hello",5)); // -1

console.log("\n----------分割线----------\n");

// lastIndexOf(searchString,position) 接受一个字符串和一个数字,返回指定字符串在索引到position(默认无穷)位置时最后一次出现的索引,如果没有找到则返回-1
console.log("Hello World".lastIndexOf("World")); // 6
console.log("Hello World".lastIndexOf("Hello",5)); // 0

console.log("\n----------分割线----------\n");

// isWellFormed() 方法返回一个表示该字符串是否包含‘单独代理项’的布尔值。不常用忽略
// toWellFormed() 方法返回一个表示该字符串是否包含‘单独代理项’的字符串。不常用忽略

console.log("\n----------分割线----------\n");

// localeCompare(compareString[, locales[, options]]) 返回一个数字,表示两个字符串在特定语言环境下的比较结果
console.log("abc".localeCompare("xyz")); // -1 abc在xyz之前
console.log("xyz".localeCompare("abc")); // 1 xyz在abc之后
console.log("abc".localeCompare("abc")); // 0 两个字符串相等(a,a)

console.log("\n----------分割线----------\n");

// match(regexp) 检索字符串与正则表达式进行匹配的结果, regexp一个正则表达式对象或者任何具有 Symbol.match 方法的对象。
console.log("Hello 123 World".match(/\d+/g)); // ["123"] ,匹配数字

console.log("\n----------分割线----------\n");

// matchAll(regexp) 方法返回一个包含所有匹配正则表达式的结果及其实际位置的可迭代对象。
let reg = "Hello 123 World 123".matchAll(/\d+/g); // 返回一个可迭代对象,包含所有匹配正则表达式的结果及其实际位置
console.log(reg.next().value); // ["123", index: 6, input: "Hello 123 World 123", groups: undefined]
console.log(reg.next().value); // ["123", index: 16, input: "Hello 123 World 123", groups: undefined]

console.log("\n----------分割线----------\n");

// normalize([form]) 返回将字符中16进制编号转成字符后的字符串,form:是 "NFC"、"NFD"、"NFKC" 或 "NFKD" 其中之一,用于指定 Unicode 标准化形式。如果省略或为 undefined,则使用 "NFC"。
console.log("\uff05".normalize()); // %

console.log("\n----------分割线----------\n");

// padEnd(targetLength [, padString]) 在当前字符串尾部填充指定的字符串(默认为空字符' ')直到达到指定的长度。返回一个新的字符串。
console.log('hello'.padEnd(10)); // hello     ,在字符串尾部填充空格
console.log('hello'.padEnd(10,'-')); // hello-----,在字符串尾部填充'-'

console.log("\n----------分割线----------\n");

// padStart(targetLength [, padString]) 在当前字符串头部填充指定的字符串(默认为空字符' ')直到达到指定的长度。返回一个新的字符串。
console.log('hello'.padStart(10)); //     hello ,在字符串头部填充空格
console.log('hello'.padStart(10,'-')); // ----hello ,在字符串头部填充'-'

console.log("\n----------分割线----------\n");

// repeat(count) 返回一个新的字符串,表示将当前字符串重复count次。
console.log('hello'.repeat(2)); // hellohello

console.log("\n----------分割线----------\n");

// replace(searchValue, newSubStr | function) 根据参数1的规则(通常时正则表达式)非正则时将匹配第一个位置的字符替换成参数2或参数2的返回值。返回一个新的字符串,不会改变原字符串
console.log('hello'.replace('e','a')); // hallo
console.log('hello'.replace('l','a')); // healo
console.log('hello'.replace(/o/g,'a')); // hella

console.log("\n----------分割线----------\n");

// replaceAll(searchValue, newSubStr | function) 根据参数1的规则(通常时正则表达式)将匹配到的所有字符替换成参数2或参数2的返回值。返回一个新的字符串,不会改变原字符串
console.log('hello'.replaceAll('l','a')); // heaao

console.log("\n----------分割线----------\n");

// search(searchValue) 根据正则表达式返回匹配到的第一个位置,否则返回-1
console.log('hello'.search(/l/)); // 2

console.log("\n----------分割线----------\n");

// slice(start, end) 返回一个从start到end(不包括end)的子字符串。如果start或end是负数,则它们表示从字符串的末尾开始的位置。
console.log('hello'.slice(1,3)); // el

console.log("\n----------分割线----------\n");

// split(separator, limit) 根据参数1的规则(通常时正则表达式)将字符串分割成数组,参数2(可选)表示最多分割成多少个元素。返回一个数组
console.log('hello'.split('')); // ["h", "e", "l", "l", "o"]
console.log('hello'.split('l')); // ["he", "", "o"]
console.log('hello'.split(/e/)); // ["h", "llo"]

console.log("\n----------分割线----------\n");

// startsWith(searchString, position) 判断字符串是否以参数1的字符串开头,参数2(可选)表示从哪个位置开始判断。返回布尔值
console.log('hello'.startsWith('h')); // true
console.log('hello'.startsWith('e')); // false
console.log('hello'.startsWith('e', 1)); // true

console.log("\n----------分割线----------\n");

// substring(start, end) 返回一个从start到end(不包括end)的子字符串。substring() 方法从 indexStart 开始提取字符,直到(但不包括)indexEnd。
// 如果省略了 indexEnd,则 substring() 提取字符直到字符串的末尾。 如果 indexStart 等于 indexEnd,则 substring() 返回一个空字符串。如果 indexStart 大于 indexEnd,则 substring() 的效果就像交换了这两个参数一样
// 任何小于 0 或大于 str.length 的参数值都会被视为分别等于 0 和 str.length。 任何值为 NaN 的参数将被视为等于 0。

console.log('hello'.substring(1,3)); // el
console.log('hello'.substring(3,1)); // el
console.log('hello'.substring(3,3)); // ''

console.log("\n----------分割线----------\n");

// [Symbol.iterator]() 返回一个新的迭代器对象,该对象遍历字符串值。字符串是一个可迭代对象
let iterator = 'hello'[Symbol.iterator]();
console.log(iterator.next().value); // h
console.log(iterator.next().value); // e
console.log(iterator.next().value); // l

console.log("\n----------分割线----------\n");

// toLocaleLowerCase() 将字符串转换为小写并返回。不会改变原字符串
console.log('HHHH'.toLocaleLowerCase()); // hhhh

console.log("\n----------分割线----------\n");

// toLocaleUpperCase() 将字符串转换为大写并返回。不会改变原字符串
console.log('hhhh'.toLocaleUpperCase()); // HHHH

console.log("\n----------分割线----------\n");

// toLowerCase() 将字符串转换为小写并返回。不会改变原字符串
console.log('Hello'.toLowerCase()); // hello

console.log("\n----------分割线----------\n");

// toUpperCase() 将字符串转换为大写并返回。不会改变原字符串
console.log('hello'.toUpperCase()); // HELLO

console.log("\n----------分割线----------\n");

// toString() 返回字符串表示
console.log('hello'.toString()); // hello

console.log("\n----------分割线----------\n");

// trim() 从字符串的两端删除空白字符并返回。不会改变原字符串
console.log(' hello '.trim()); // 'hello'

console.log("\n----------分割线----------\n");

// trimEnd() 从字符串的末尾删除空白字符并返回。不会改变原字符串
console.log(' hello '.trimEnd()); // ' hello'

console.log("\n----------分割线----------\n");

// trimStart() 从字符串的开头删除空白字符并返回。不会改变原字符串
console.log(' hello '.trimStart()); // 'hello '

console.log("\n----------分割线----------\n");

// valueOf() 返回字符串的原始值,主要用来提取new 构造的String对象的字符值

let strVal = new String('hello');
console.log(strVal); // [String: 'hello']
console.log(strVal.valueOf()); // hello

你可能感兴趣的:(javascript,前端,开发语言)