【JavaScript】字符串及其常用方法

字符串的创建

字面量创建方式

let str = 'superman';
console.log(typeof str); // string

构造函数创建方式

let str = new String('superman');
console.log(typeof str); // object

字符串的属性

字符串是特殊的数组，具有 length 属性，也可以像数组一样使用下标来获取字符

let str = 'superman';
console.log(str.length); // 8
console.log(str[0]); // s

字符串的常用方法

在调用方法时，字符串会被隐式地转换成包装类。所有的操作都作用于包装类构造的对象，不会对原字符串产生影响

标有 * 表示数组也有同名方法

charAt()寻值

• 用于查询指定位置的字符

let str = 'superman';
console.log(str.charAt(1)); // u
console.log(str[1]); // u

• charAt()：当参数索引 > length-1，返回空字符串
• 下标：当索引 > length-1，返回 undefined

let str = 'superman';
console.log(str.charAt(10)); // ''
console.log(str[10]); // undefined

charCodeAt()寻编码值

• 用于获取字符串中指定索引的字符编码

let str = 'superman';
console.log(str.charCodeAt(1)); // 117

如果参数索引 > length-1，则返回 NaN

let str = 'superman';
console.log(str.charCodeAt(10)); // NaN

常见编码值：

• 0-9 → 48-57
• A-Z → 65-90
• a-z → 97-122

fromCharCode()寻值

• 该方法是 String 的方法，需要通过 String. 调用
• 用于获取指定字符编码的字符

let str = String.fromCharCode(110);
console.log(str); // n

search()寻址

• 从前往后查询指定字符串第一次出现的位置 ( 1个参数 )
• 找到，则返回 下标；找不到，则返回 -1

let str = 'asdffdsa';
console.log(str.search('d')); // 2

replace()替换(删除)

• 用于字符串的替换

str.replace(str1, str2);

• 在 str 中，从前往后找第一个子字符串 str1，并用 str2 替换
• 如果在 str 中没有找到 str1，则返回原 str

let str = 'superman';
console.log(str.replace('man', 'women')); // superwomen

用空字符串替换，可以实现字符串的删除

let str = 'superman';
console.log(str.replace('man', '')); // super

split()分割

str.split(分隔符);

• 用指定分割符把 str 分割开，以数组的形式返回分割后的子串，和数组的 join() 方法对应

let str = '1, 2, 3';
console.log(str.split(', ')); // (3) ["1", "2", "3"]

如果不传入参数，则把 str 作为数组的一项

let str = '1, 2, 3';
console.log(str.split()); // ["1, 2, 3"]

如果传入空字符串''，则按字符分割

let str = '1, 2, 3';
console.log(str.split('')); // (7) ["1", ",", " ", "2", ",", " ", "3"]

• 如果分割符在 str 的头部，则切出来的第一个项为空字符串
• 如果分割符在 str 的尾部，则切出来的最后一项为空字符串

let str = '1, 2, 3'
console.log(str.split('1')) // (2) ["", ", 2, 3"]
console.log(str.split('3')) // (2) ["1, 2, ", ""]

toLowerCase()小写

用于将英文字符转成小写

let str = 'SUPERMAN'
console.log(str.toUpperCase()) // superman

toUpperCase()大写

用于将英文字符转成大写

let str = 'superman'
console.log(str.toUpperCase()) // SUPERMAN

试着自己封装这个方法

function myUpper(str) {
    str = str || "";
    let newStr = "";
    for (let i = 0; i < str.length; i++) {
        let charCode = str.charCodeAt(i);
        if (97 <= charCode && charCode <= 122) {
            newStr += String.fromCharCode(charCode - 32);
        } else {
            newStr += str[i];
        }
    }
    return newStr;
}

trim()去空格

用于去除字符串两边的空格

let str = '    superman    '
console.log(str) //     superman    
console.log(str.trim()) // superman

• trimLeft()去除字符串左边的空格
• trimRight()去除字符串右边的空格

试着封装方法去除所有的空格

function myTrim(str) {
    str = str || "";
    let arr = str.split("");
    let newStr = "";
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] != " ") {
            newStr += arr[i];
        }
    }
    return newStr;
}

function myTrim(str) {
    for (let i = str.length - 1; i >= 0; i--) {
        if (str[i] == " ") {
            str = str.replace(str[i], "");
        }
    }
    return str;
}
myTrim(str);

substr()截取

str.substr(start, num);

• 0 ~ 2 个参数
• start：开始截取的索引，默认为 0，可以为负数。负数 → length + 负数
• num：截取的个数

let str = 'superman';
console.log(str.substr()); // superman
console.log(str.substr(5)); // man
console.log(str.substr(0, 5)); // super

substring()截取

str.substring(start, end);

• 0 ~ 2 个参数
• start：开始截取的索引 ( 包含 )，默认为 0
• end：结束截取的索引 ( 不包含 )，默认为 length

let str = 'superman';
console.log(str.substring()); // superman
console.log(str.substring(5)); // man
console.log(str.substring(0, 5)); // super

slice()截取*

用法和 substring() 一样

区别

slice() 的参数支持负数。负数 → length + 负数

let str = 'superman';
console.log(str.substring(0, 5));
console.log(str.slice(-8, -3)); // super

substring() 的参数不支持负数。负数 → 0

let str = 'superman';
console.log(str.substring(-1)); // superman → str.substring(0)
console.log(str.substring(-5, -1)); // 空字符串 → str.substring(0, 0)

substring() 会自动从小的参数索引开始截取，到大的参数索引结束

let str = 'superman';
console.log(str.substring(0, 5)) // super
console.log(str.substring(5, 0)) // super

indexOf()寻址*

• 从前往后查询指定字符串第一次出现的位置 ( 1~2个参数 )
• 找到，则返回 下标；找不到，则返回 -1

第 1 个参数：查找的元素
第 2 个参数：开始查找的下标

let str = 'asdffdsa';
console.log(str.indexOf('d')); // 2 → 从前往后查找字符串 d 第一次出现的位置

let str = 'asdffdsa';
console.log(str.indexOf('d', 6)); // -1 → 从下标 6 开始，向后查找字符串 d 第一次出现的位置

lastIndexOf()寻址*

• 从后往前查询指定字符串第一次出现的位置 ( 1~2个参数 )
• 找到，则返回 下标；找不到，则返回 -1

第 1 个参数：查找的元素
第 2 个参数：开始查找的下标

let str = 'asdffdsa';
console.log(str.lastIndexOf('d')); // 5 → 从后往前查找字符串 d 第一次出现的位置

let str = 'asdffdsa';
console.log(str.lastIndexOf('d', 3)); // 2 → 从下标 3 开始，向前查找字符串 d 第一次出现的位置

concat()拼接*

• 1 ~ n 个参数
• 用于字符串的拼接，与 + 等效

let str = 'superman';
console.log(str.concat(" and", " you")); // superman and you
console.log(str + " and" + " you"); // superman and you

练一练

逆序字符串

let str = "superman";
let newStr = "";

for (let index = str.length - 1; index >= 0; index--) {
    newStr += str[index];
}

console.log(str); // superman
console.log(newStr); // namrepus

let str = "superman";
let newStr = str.split('').reverse().join('');
console.log(newStr); // namrepus

ES6 字符串的扩展