文章目录
- 序言
- 操作方法
- 空格 trim()
- 切割 split()
- 拼接 concat()
- 替换 replace()
- 截取方法
- 按个数 substr()
- 正索引 substring()
- 负索引 slice()
- 查找方法
- 查索引 charAt()
- 查片段 indexOf()
- 查编码 charCodeAt()
- 查编码 codePointAt()【ES6】
- 正则匹配
- 索引 search()
- 片段 match()
- 大小写转换方法
- 转小写 toLowerCase()
- 转大写 toUpperCase()
- ES6 新增方法
- 构造字符串 repeat()
- 是否有这个 includes()
- 以啥为首尾 startsWith / endsWith()
- 补齐字符串 padStart / padEnd()
- 静态方法
- String.raw()
- String.fromCharCode()
- String.fromCodePoint()【ES6】
序言
JavaScript 字符串由16位码元(code unit)组成。对于多数 字符 来说,每16位码元(相当于索引)对应一个字符。
- 重点:所有字符串方法都不会改变原始字符串
操作方法
空格 trim()
ES6新增:
trimStart()
:去除首部的空格,与trimLeft()
作用效果一样
trimEnd()
:去除尾部的空格,与trimRight()
作用效果一样
- 作用:
去除首尾的空格
- 语法:
string.trim()
: - 参数:
- 返回值:去除空格以后的字符串
js">var str = ' hello world ';
var res = str.trim();
console.log(str); // hello world
console.log(res); // hello world
切割 split()
-
作用:
切割字符串
-
语法:
string.split('切割符号',多少个)
: -
参数:
- 切割符号:按照你写的符号把字符串切割开来
- 如果不写:那么就直接切割一个完整的
- 如果写一个空字符串(‘’):则按照一位一位的切割
- 多少个:选填,默认是全部,表示你切割完以后保留多少个
- 切割符号:按照你写的符号把字符串切割开来
-
返回值:以数组形式保持每一段内容
js">var str = '2020-12-12';
var res1 = str.split('-');
console.log(res1); // ['2020','12','12']
var res2 = str.split('-',2);
console.log(res2); // ['2020','12']
var res3 = str.split();
console.log(res3); // ['2020-12-12']
var res4 = str.split('');
console.log(res4); // ['2','0','2','0','-','1','2','-','1','2']
拼接 concat()
- 作用:
拼接字符串
- 语法:
string.concat(string)
: - 参数:要拼接的字符串
- 返回值:拼接好的字符串
js">var str1 = 'hello';
var str2 = 'world';
var res = str1.concat(str2);
console.log(res); // helloworld
替换 replace()
- ES2021 引入了
replaceAll()
方法,可以一次性替换所有匹配。
它的用法与replace()
相同,但是不能使用正则。replace()
只能替换第一个匹配,如果要替换所有的匹配,必须使用正则表达式的g
修饰符。
-
作用:
替换字符串内的某些字符(只能替换查找到的第一个)
-
语法:
string.replace('要被替换的字符','替换成的字符')
: -
返回值:替换好的字符串
-
示例 1:
js">'aabbcc'.replace('b', '_') // 'aa_bcc'
'aabbcc'.replace(/b/g, '_') // 'aa__cc'
'aabbcc'.replaceAll('b', '_') // 'aa__cc'
'aabbcc'.replaceAll(/b/, '_') // 使用正则会报错
- 示例 2:两者对比
js">'aabbcc'.replace('b', '_') // 'aa_bcc'
'aabbcc'.replace(/b/g, '_') // 'aa__cc'
'aabbcc'.replaceAll('b', '_') // 'aa__cc'
'aabbcc'.replaceAll(/b/, '_') // 使用正则会报错
截取方法
按个数 substr()
警告: 尽管 String.prototype.substr(…) 没有严格被废弃 (as in “removed from the Web standards”), 但它被认作是遗留的函数并且可以的话应该避免使用。它并非JavaScript核心语言的一部分,未来将可能会被移除掉。如果可以的话,使用 substring() 替代它.
substr()
方法:返回一个字符串中从指定位置开始到指定字符数的字符。- 语法:不改变原字符串
js">/*
start:开始索引
length:截取的个数
*/
str.substr(start[, length])
- 示例:
js">var str = "abcdefghij";
// 0123456789
console.log("(1,2): " + str.substr(1,2)); // (1,2): bc
console.log("(-3,2): " + str.substr(-3,2)); // (-3,2): hi
console.log("(-3): " + str.substr(-3)); // (-3): hij
console.log("(1): " + str.substr(1)); // (1): bcdefghij
console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
console.log("(20, 2): " + str.substr(20,2)); // (20, 2):
正索引 substring()
substring()
方法:返回一个字符串在开始索引到结束索引之间的一个子集,或从开始索引直到字符串的末尾的一个子集.- 语法:不改变原字符串
js">/*
indexStart:开始索引
indexEnd:结束索引
*/
str.substring(indexStart[, indexEnd])
- 包含开始索引,不包含结束索引
- 如果省略indexEnd,substring提取字符一直到字符串末尾
- 如果indexStart等于indexEnd,substring返回一个空字符串.
- 如果任一参数小于 0 或为 NaN ,则被当作 0
- 如果任一参数大于stringName.length、则被当作stringName.length
- 如果indexStart大于indexEnd、则substring的执行效果就像两个参数调换了一样
- 示例:
js">var anyString = "Mozilla";
// 0123456
// 输出 "Moz"
console.log(anyString.substring(0,3));
console.log(anyString.substring(3,0));
console.log(anyString.substring(3,-3));
console.log(anyString.substring(3,NaN));
console.log(anyString.substring(-2,3));
console.log(anyString.substring(NaN,3));
// 输出 "lla"
console.log(anyString.substring(4,7));
console.log(anyString.substring(7,4));
// 输出 ""
console.log(anyString.substring(4,4));
// 输出 "Mozill"
console.log(anyString.substring(0,6));
// 输出 "Mozilla"
console.log(anyString.substring(0,7));
console.log(anyString.substring(0,10));
负索引 slice()
slice()
方法:提取某个字符串的一部分,并返回一个新的字符串- 语法:不改变原字符串
js">/*
beginIndex:开始索引
endIndex:结束索引
*/
str.slice(beginIndex[, endIndex])
- 包含开始索引,不包含结束索引
- 如果省略endIndex参数,则会一直提取到字符串末尾
- 如果beginIndex值为负数,会被当做strLength + beginIndex看待,这里的strLength是字符串的长度
- 例如:如果beginIndex是-3则看作是:strLength - 3
- 如果endIndex值为负数,则被看作是strength+endIndex,这里的strength就是字符串的长度
- 例如:如果endIndex是-3,则是,Strength-3
js">var str = 'The morning is upon us.', // str 的长度 length 是 23。
console.log(str1.slice(1, 8)); // 输出:he morn
console.log(str1.slice(4, -2)); // 输出:morning is upon u
console.log(str1.slice(12)); // 输出:is upon us.
console.log(str1.slice(30)); // 输出:""
console.log(str.slice(-3)); // 返回 'us.'
console.log(str.slice(-3, -1)); // 返回 'us'
console.log(str.slice(0, -1)); // 返回 'The morning is upon us'
查找方法
查索引 charAt()
charAt()
方法:从一个字符串中返回指定的字符。- 语法:不改变原字符串
js">/*
index:索引
*/
str.charAt(index)
- 如果没有提供索引,charAt() 将使用 0
- 如果有该索引,就是索引位置字符串
- 示例:
js">var anyString = "Brave new world";
console.log(anyString.charAt(0)); // "B"
console.log(anyString.charAt(1)); // "r"
console.log(anyString.charAt(2)); // "a"
console.log(anyString.charAt(3)); // "v"
console.log(anyString.charAt(4)); // "e"
console.log(anyString.charAt(999)); // ""
查片段 indexOf()
lastIndexOf():从后向前在字符串里面查找指定字符串片段,用法与 indexOf() 一致
indexOf()
方法:返回调用它的String对象中第一次出现的指定值的索引- 语法:不改变原字符串
js">/*
searchValue:要被查找的字符串片段
fromIndex:开始索引
*/
str.indexOf(searchValue [, fromIndex])
- 字符串片段不能为正则表达式
- 如果没有找到,则返回-1
- 如果没有提供searchValue,searchValue会设置成'undefined'
- fromIndex的值小于0、等同于为空情况
- searchValue 是一个空字符串:fromIndex 值大于等于字符串的长度,将会直接返回字符串的长度 str.length
- searchValue 是一个空字符串:fromIndex 值小于被查找的字符串的长度,将会直接返回fromIndex值
- 示例:
js">"Blue Whale".indexOf("Blue") // 返回 0
"Blue Whale".indexOf("Blute") // 返回 -1
"Blue Whale".indexOf("Whale", 0) // 返回 5
"Blue Whale".indexOf("Whale", 5) // 返回 5
"Blue Whale".indexOf("", -1) // 返回 0
"Blue Whale".indexOf("", 9) // 返回 9
"Blue Whale".indexOf("", 10) // 返回 10
"Blue Whale".indexOf("", 11) // 返回 10
查编码 charCodeAt()
charCodeAt()
方法返回给定索引处的UTF-16代码单元(编码)- 语法:不改变原字符串
js">/*
index:索引
*/
str.charCodeAt(index)
- 如果index不是一个数值,则默认为0
- 如果index超出范围,则返回NaN
js">"ABC".charCodeAt(0) // returns 65
"ABC".charCodeAt(1) // returns 66
"ABC".charCodeAt(2) // returns 67
"ABC".charCodeAt(3) // returns NaN
查编码 codePointAt()【ES6】
Surrogate Pair是UTF-16中用于扩展字符而使用的编码方式,是一种采用四个字节(两个UTF-16编码)来表示一个字符,称作代理对。
codePointAt()
方法返回 一个 Unicode 编码点值的非负整数。- 语法:不改变原字符串
js">/*
index:索引
*/
str.codePointAt(index)
- 如果在索引处没找到元素则返回 undefined
- 如果index超出范围,则返回NaN
js">'ABC'.codePointAt(1); // 66
'\uD800\uDC00'.codePointAt(0); // 65536
'XYZ'.codePointAt(42); // undefined
正则匹配
索引 search()
search()
方法:执行正则表达式和 String 对象之间的一个搜索匹配。- 语法:
js">/*
regexp:一个正则表达式(regular expression)对象
*/
str.search(regexp)
- 如果匹配成功,则返回正则表达式在字符串中首次匹配项的索引; 否则,返回 -1
- 示例:
js">var str = "hey JudE";
// 它是第一个大写字母 J 的索引
console.log(str.search(/[A-Z]/g)); // 4
// 找不到 . 标点符号
console.log(str.search(/[.]/g)); // -1
片段 match()
ES6新增:
matchAll()
方法:返回一个正则表达式在当前字符串的所有匹配
match()
方法:检索返回一个字符串匹配正则表达式的结果.- 语法:
js">/*
regexp:一个正则表达式(regular expression)对象
*/
str.match(regexp)
- 如果使用g标志,则将返回与完整正则表达式匹配的所有结果,但不会返回捕获组
- 如果未使用g标志,则仅返回第一个完整匹配及其相关的捕获组(Array)
- 示例:
js">const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
const regex = /[A-Z]/g;
const found = paragraph.match(regex);
console.log(found);
// expected output: Array ["T", "I"]
大小写转换方法
转小写 toLowerCase()
- 语法:
array.toLowerCase()
- 参数:
- 作用:将字符串里面的大写字母转换成小写字母
- 返回值:转换好以后的字符串
js">var str = 'hello';
//使用 toUpperCase 转换成大写
var upper = str.toUpperCase();
console.log(upper); // HELLO
toLocaleLowerCase()
- 与
toLowerCase()
用法一致 - 创造目的是为了在特地地区实现
- 比如:土耳其语的大小写转换
转大写 toUpperCase()
- 作用:
将字符串里面的小写字母转换成大写字母
- 语法:
array.toUpperCase()
- 参数:
- 返回值:转换好以后的字符串
js">var str = 'HELLO';
//使用 toLowerCase 转换成小写
var lower = upper.toLowerCase();
console.log(lower); //hello
toLocaleUpperCase()
- 与
toUpperCase()
用法一致 - 可以额外在特地地区实现
- 比如:土耳其语的大小写转换
- 与
toUpperCase()
用法一致 - 可以额外在特地地区实现
- 比如:土耳其语的大小写转换
ES6 新增方法
构造字符串 repeat()
- 作用:
构造并返回一个新字符串
- 语法:
string.repeat()
: - 参数:表示在新构造的字符串中重复了多少遍原字符串
- 返回值: 包含指定字符串的指定数量副本的新字符串。
js">"abc".repeat(-1) // RangeError: repeat count must be positive and less than inifinity
"abc".repeat(0) // ""
"abc".repeat(1) // "abc"
"abc".repeat(2) // "abcabc"
"abc".repeat(3.5) // "abcabcabc" 参数count将会被自动转换成整数.
"abc".repeat(1/0) // RangeError: repeat count must be positive and less than inifinity
是否有这个 includes()
- 作用:
查找字符串里面是否包含指定字符串片段
- 语法:
string.includes('字符串片段')
: - 参数:
- 返回值:布尔值
- 有就是,true
- 没有就是 false
js">var str = 'hello world'
var res1 = str.includes('a');
console.log(res1); // false
var res2 = str.includes('e');
console.log(res2); // true
var res3 = str.includes('ll');
console.log(res3); // true
以啥为首尾 startsWith / endsWith()
- 作用:
判断该字符串是不是以这个字符串片段开始的
- 语法:
string.startsWith('字符串片段')
: - 参数:
- 返回值:一个布尔值
- 是就是,true
- 不是就是,false
js">var str = 'hello world';
var res1 = str.startsWith('hello');
console.log(res1); // true
var res2 = str.startsWith('world');
console.log(res2); // false
-
作用:
判断该字符串是不是以这个字符串片段结束的
-
语法:
string.ecdsWith('字符串片段')
: -
参数:
-
返回值:一个布尔值
- 是就是,true
- 不是就是,false
js">var str = 'hello world';
var res1 = str.startsWith('hello');
console.log(res1); // false
var res2 = str.startsWith('world');
console.log(res2); // true
补齐字符串 padStart / padEnd()
- 作用:
从前面补齐字符串
- 语法:
string.padStart(目标长度,'填充字符串')
- 参数:
- 目标长度,你想把字符串补充到多长
- 如果小于字符串本身长度,就没有意义
- 超过长度以后,用填充字符串补齐
- 填充字符串,可以是一个字符
- 多个的时候,如果超长,后面的就不要了
- 目标长度,你想把字符串补充到多长
- 返回值:补齐以后的字符串
js">var str = '1234';
var res1 = str.padStart(3,'a');
console.log(res1); // 1234
var res2 = str.padStart(10,'a');
console.log(res2); // aaaaaa1234
var res3 = str.padStart(6,'abcd');
console.log(res3); // ab1234
- 作用:
从后面补齐字符串补齐
- 语法:
string.padEnd(目标长度,'填充字符串')
- 参数:
- 目标长度,你想把字符串补充到多长
- 如果小于字符串本身长度,就没有意义
- 超过长度以后,用填充字符串补齐
- 填充字符串,可以是一个字符
- 多个的时候,如果超长,后面的就不要了
- 目标长度,你想把字符串补充到多长
- 返回值:补齐以后的字符串
js">var str = '1234';
var res1 = str.padStart(3,'a');
console.log(res1); // 1234
var res2 = str.padStart(10,'a');
console.log(res2); // 1234aaaaaa
var res3 = str.padStart(6,'abcd');
console.log(res3); // 1234ab
静态方法
String.raw()
ES6 还为原生的 String 对象,提供了一个raw()方法。可以作为处理模板字符串的基本方法,它会将所有变量替换,而且对斜杠进行转义,方便下一步作为字符串来使用
- 该方法返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串
js">String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!",显示的是转义后的结果 "Hi\n5!"
String.raw`Hi\u000A!`;
// 实际返回 "Hi\\u000A!",显示的是转义后的结果 "Hi\u000A!"
- 如果原字符串的斜杠已经转义,那么String.raw()会进行再次转义。
js">String.raw`Hi\\n`
// 返回 "Hi\\\\n"
String.raw`Hi\\n` === "Hi\\\\n" // true
String.fromCharCode()
- 作用:
由指定的 UTF-16 代码单元序列创建的字符串。
- 语法:
String.fromCharCode()
:- 参数是一系列 UTF-16 代码单元的数字
- 范围介于 0 到 65535(0xFFFF)之间
- 大于 0xFFFF 的数字将被截断。
- 参数:
- 返回值:一个长度为 N 的字符串,由 N 个指定的 UTF-16 代码单元组成
js">String.fromCharCode(65, 66, 67); // 返回 "ABC"
String.fromCharCode(0x2014); // 返回 "—"
String.fromCharCode(0x12014); // 也是返回 "—"; 数字 1 被剔除并忽略
String.fromCharCode(8212); // 也是返回 "—"; 8212 是 0x2014 的十进制表示
String.fromCodePoint()【ES6】
- 作用:
使用指定的代码点序列创建的字符串
- 语法:
String.fromCodePoint()
: - 参数:一串 Unicode 编码位置,即“代码点”。
- 返回值:使用指定的 Unicode 编码位置创建的字符串。
js">console.log(String.fromCodePoint(9731, 9733, 9842, 0x2F804)); // "☃★♲你"
console.log(String.fromCodePoint(97, 98, 100, 101)); // "abde"