JavaScript初级篇——字符串常用方法

100 阅读4分钟

一、创建字符串

字符串字面量创建方式

let str = '123';

字符串对象创建方式

let str = new String('123');

得到的字符串对象是一个类数组(拥有length属性,但不具备数组所有的方法)

二、字符串中的方法

1、查找类字符串方法

1-1、str[index] & str.charAt(index)

通过下标拿到某个字符

  1. 通过 str[index]取值是有兼容性问题 的,ie8以下是取不到的

  2. 可以使用str.charAt(index) 方式取, 不填index默认为0:

    如果超出length会返回空字符串,如果是负数也是输出空字符串

let str = 'lalal';
console.log(typeof str); //String
console.log(str[1]); // a
console.log(str.charAt()); // l

let str2 = new String('lalal');
console.log(typeof str2); // Object
console.log(str2.charAt(1));// 1: 字符的索引值 // a
console.log(str2.charAt(str2.length + 1)); // 输出空字符串
console.log(str2.charAt(-1)); // 输出空字符串

1-2、str.charCodeAt(index)

拿到字符对应的unicode编码

索引值不写默认为0, 如果给定索引值超出索引值或者给定负数的下标则返回NaN

let str3 = '中';
console.log(str3.charCodeAt(0)); // 20013
console.log(str3.charCodeAt(-10)); // NaN

1-3、String.fromCharCode(unicode编码)

得到unicode编码对应的字符

可以接受多个参数(以逗号分割)

let str4 = '好好学习';
let arr = [];
for(let i=0;i<str4.length; i++) {
	arr[i] = str4.charCodeAt(i);
}
// console.log(String.fromCharCode(arr[0]),String.fromCharCode(arr[1]),String.fromCharCode(arr[2]), String.fromCharCode(arr[3]));
// 可以接收多个参数以逗号分割:
console.log(String.fromCharCode(arr[0], arr[1], arr[2], arr[3]));

1-4、str.indexOf(value[, fromIndex])

查找字符串中字符对应的索引(从前往后查找)

用于查找字符串中对应字符第一次出现的索引,如果有则输出对应索引,没有则输出-1

  1. value:要查找的字符

  2. fromIndex(可选)表示搜索的起始位置(包含该位置)不传默认是0

    • 如果fromIndex小于0会当成0来处理
    • 如果fromIndex超出了索引值范围则返回-1
let str5 = 'hahah';
console.log(str5.indexOf('h')); // 0
console.log(str5.indexOf('h', 2)); // 2
console.log(str5.indexOf('h', -1)); // 0
console.log(str5.indexOf('h', 10)); // -1
console.log(str5.indexOf('ha')); // 0

1-5、str.lastIndexOf(value[, fromIndex])

查找字符串中字符对应的索引(从后往前查找)

  1. value:要查找的字符

  2. fromIndex(可选)表示搜索的起始位置,如果不传默认为str的length-1

    • 如果超出length则会当成length-1
    • 如果是负数则会当成0来处理
let str5 = 'hahah';
console.log(str5.lastIndexOf('h')); //4
console.log(str5.lastIndexOf('h', -1)); // 0
console.log(str5.lastIndexOf('h', 100)); // 4

1-6、str.includes(value[, fromIndex])

字符串中是否包含某一个值

参数:

  1. value:要查找的字符
  2. fromIndex(可选)表示搜索的起始位置(包含该位置) ,如果不传默认为0

返回值: boolean

let str = 'abcd';
console.log(str.includes('b')); // true
console.log(str.includes('b',1)); // true

1-7、str.startsWith(searchString[, position])

是否以某一子串开头

参数:

  1. searchString:要查找的子字符串
  2. position(可选)表示搜索的起始位置(包含该位置) ,如果不传默认为0

返回值: boolean

const str = '好好学习,天天向上';
console.log(str.startsWith('天天向上', 5)); // true

1-8、str.endsWith(searchString[, length])

是否以某一子串结尾

参数:

  1. searchString:要查找的子字符串
  2. length(可选)表示字符串的长度,如果不传默认为str.length

返回值: boolean

const str = '好好学习,天天向上';
console.log(str.endsWith('向上'));// true
console.log(str.endsWith('学习', 4)); // true 只看前4位(好好学习)

2、截取类字符串方法

2-1、str.slice(begin,end)

用于截取字符串:如果不传递begin和end截取后的字符串与被截取的字符串的值相等

截取的字符串包含开始索引,不包含结束索引

begin: 截取的起始位置,不传默认为0

  • 如果begin >= 0 则从对应索引开始进行截取(包括对应的索引位置的字符
  • 如果begin < 0 则从后倒数对应索引的位置开始截取( -1 -2 -3.....包括对应的索引位置的字符,一旦负数的绝对值大于等于字符串的长度,则会输出整个字符串(起始位置会被当成0))

end: 截取的结束的位置,不包含该位置,如果不传则默认为length

  • 如果end超出了length 则默认为length

  • 如果end小于0 如str.slice(1,-1) ;则会输出字符串对应的从第一个索引到倒数第一个索引对应的字符串(不包含倒数第一的字符),如果负数超出了length则会输出空字符串

  • 如果end在begin前面,会输出空字符串

  • 如果end和begin相等,则也会输出空字符串

 let str6 = 'haohaoxuexi';
 console.log(str6.slice()); // haohaoxuexi
 console.log(str6.slice(1));// aohaoxuexi
 console.log(str6.slice(-3)); // exi
 console.log(str6.slice(-20));// haohaoxuexi
 console.log(str6.slice(1, 4)); // aoh
 console.log(str6.slice(1, -1)); // aohaoxuex
 console.log(str6.slice(1, -50)); // 空字符串
 console.log(str6.slice(5, 0)); // 空字符串

2-2、str.substring(begin,end)

用于截取字符串:如果不传递begin和end截取后的字符串与被截取的字符串的值相等

截取的字符串包含开始索引,不包含结束索引

begin: 截取的起始位置,不传默认为0

  • 如果begin >= 0 则从对应索引开始进行截取(包括对应的索引位置的字符

  • 如果begin < 0 则认为是0

  • 如果begin超出了字符串的length,则会返回空字符串

end: 截取的结束位置,不包含该位置

  • 如果end超出了length,则默认为length
  • 如果end < 0,则当成0
  • 如果end < begin,则会把begin当成end,end当成begin
  • 如果end = begin,则输出空字符串
let str6 = 'haohaoxuexi';
console.log(str6.substring(1)); // aohaoxuexi
console.log(str6.substring(-1)); //haohaoxuexi
console.log(str6.substring(100)); //空字符串
console.log(str6.substring(1,4)); // aoh
console.log(str6.substring(1, -1)); // h 相当于str6.substring(1,0) 此时起始>结束 则会将两者调换,即str6.substring(0,1)
console.log(str6.substring(5,2)); // oha
console.log(str6.substring(1,1)); // 空字符串

2-3、str.substr(start[,length])

不推荐,未来可能被废除

截取从start位置开始的字符,包含start位置的字符

start为起始位置,length为截取的字符个数(可选)

  • start可以为负数,则会从倒数第start个进行截取;如果超出了字符串长度,则输出空字符串
  • length不填则默认为到字符串结尾的位置;length超出了字符串长度则默认到字符串结尾;length < 0则返回一个空字符串
let str6 = 'haohaoxuexi';
console.log(str6.substr(1)); // aohaoxuexi
console.log(str6.substr(2, 3)); // oha
console.log(str6.substr(-3)); // exi
console.log(str6.substr(1, -3)); // 空字符串
console.log(str6.substr(100, 3)); // 空字符串

3、其他常用方法

3-1、str.split(separator[, num])

将字符串分割成数组

  1. 第一个参数是决定分割的字符,第二个参数是分割的数组中的个数(可选)
  2. 不传递参数则将字符串放在一个length为1的数组中
  3. 如果分割的字符处于字符串的首或尾,则会出现空字符
  4. 分割出的数组的lengh -1 即分割的字符出现的次数
  5. spearator为空字符串""时是将字符串中每个字符进行分割
let str6 = 'haohaoxuexi';
console.log('1266', str6.split()); // ['haohaoxuexi']

let str7 = 'ha-ha-ha';
console.log(str7.split('-')); // ['ha', 'ha', 'ha']
console.log(str7.split("")); // ["h", "a", "-", "h", "a", "-", "h", "a"]
console.log(str7.split("-", 2)); // ["ha", "ha"]
console.log(str7.split('h')); // ["", "a-", "a-", "a"] 那么h出现的次数为4-1 = 3

3-2、str.concat

将字符串合并成为一个新的字符串

  1. 返回一个新的字符串不会影响原字符串
  2. 可接收多个参数,以逗号分割

(+= 比concat拼接字符串效率更高)

let str9 = 'haohao';
let str10 = 'xuexi';
let str11 ='tiantian';
let str12 = 'xiangshang';

console.log(str9.concat(str10)); // haohaoxuexi
console.log(str9); // haohao 不影响原字符串
console.log(str9, str10, str11, str12);// haohaoxuexitiantianxiangshang

3-3、str.toLowerCase() & str.toUpperCase()

把字符转为小写 & 把字符转成大写 都返回新的字符串,不会影响原字符串

let str13 = 'A';
let str14 = 'a';
console.log(str13.toLowerCase() == str14); // true
console.log(str13); // 'A' 没有影响原字符串

3-4、str.trim() & str.trimStart() & str.trimEnd()

  1. trim():去除首尾空格,中间空格去不掉
    • 去除中间空格可以利用split分割,再用+=把字符拼接起来
  2. trimStart():只去除开头的空格(ES10新增)
  3. trimEnd():只去除结尾的空格(ES10新增)

!以上方法均返回新字符串,不会影响原字符串

 let str15 = '   hao hao xue xi  ';
 let str15new = str15.trim();
 console.log(str15);//   hao hao xue xi  
 console.log(str15new); //hao hao xue xi

console.log(str15.trimStart());//hao hao xue xi  
console.log(str15.trimEnd());//   hao hao xue xi

3-5、str.replace('被替换字符串', '替换为的字符串')

只会替换一个字符串,不会影响原字符串

let str17 = 'sshss123';
let newStr = str17.replace('s', 'a');
console.log(newStr); // ashss123
console.log(str17); // sshss123,不会影响原字符串

3-6、str.repeat(count)

构造并返回一个新字符串(不会影响原字符串),该字符串包含被链接在一起的指定数量的字符串的副本

  • count:介于0与无穷大之间的整数,表示在新构造的字符串中重复了多少遍原字符串
let str = 'a';
let newStr = str.repeat(5);
console.log(newStr);// aaaaa
console.log(str);// a

3-7、str.padStart(length, value)

向字符串开头填充指定字符value,使得字符串长度为length;

返回填充后的新字符串,不会影响原字符串

若length小于原字符串长度,则不填充

const message = "Hello World"

const newMessage = message.padStart(15, "*")
console.log(newMessage) // ****Hello World
console.log(message)// Hello World 不会影响原有字符串

// 案例:比如隐藏身份证信息
const cardNumber = "321321321321321321"
const lastFourCard = cardNumber.slice(-4)
const finalCard = lastFourCard.padStart(cardNumber.length, "*")
console.log(finalCard) // **************1321

3-8、str.padEnd(length, value)

向字符串结尾填充指定字符value,使得字符串长度为length;

返回填充后的新字符串,不会影响原字符串

若length小于原字符串长度,则不填充

const newMessage = message.padEnd(15, "-")
console.log(newMessage) // Hello World----
console.log(message)// Hello World