(JavaScript - 原生)字符串的20个常用方法 + 字符串遍历器 + 模板字符串

老生常谈,无论是职场达人还是初出茅庐的小白相信对JavaScript中的字符串都不会陌生吧,而且字符串这个元素在前端整个开发的过程中出现的频率、重要程度 ... 都是无可比拟的,今天我们来一起揭开JavaScript下字符串的神秘面纱,希望真正做到深入浅出。

## 在JavaScript中String类型是基本数据类型,这一点与其在Java等其它后台语言中为引用类型不同。

## 定义字符串:

let str = "好好学习,天天向上";

一、字符串常用的19个方法:

> -1).查找指定字符所在位置的索引

①.indexOf("指定字符");从前向后找

    // A.indexOf(Xxx);从前向后找
    console.log(str.indexOf("学"));// 打印 2
    console.log(str);// 打印 好好学习,天天向上

/**
 * -1).用处:从前向后查找指定字符的索引
 * -2).用法:str.indexOf("指定字符");
 * -3).返回值:如果找到 -> 返回指定字符所在位置的索引
 *           如果未找到 -> 返回-1
 * -4).是否改变原字符串:否
 */

②.lastIndexOf("指定字符");从后向前找

    // B.lastIndexOf(Xxx);从后向前找
    console.log(str.lastIndexOf("习"));// 打印 3
    console.log(str);// 打印 好好学习,天天向上

/**
 * -1).用处:从后向前查找指定字符所在位置的索引
 * -2).用法:str.lastIndexOf("指定字符");
 * -3).返回值:如果找到 -> 返回指定字符所在位置的索引
 *           如果未找到 -> 返回-1
 * -4).是否改变原字符串:否
 */

③.search("指定字符"/正则表达式); -> 支持正则表达式

    // C.search(Xxx);支持正则表达式
    console.log(str.search(","));// 打印 4
    console.log(str.search(/[\u4e00-\u9fa5]$/));// 打印 8
    console.log(str);// 打印 好好学习,天天向上

/**
 * -1).用处:查找指定字符所在位置的索引
 * -2).用法:str.search("指定字符"/正则表达式);
 * -3).返回值:如果找到 -> 返回指定字符所在位置的索引
 *           如果未找到 -> 返回-1
 * -4).是否改变原字符串:否
 */

> -2).查找指定索引对应的字符

①.charAt(索引);

    // A.charAt(Xxx);
    console.log(str.charAt(0));// 打印 好

/**
 * -1).用处:通过指定索引查找对应字符串
 * -2).用法:str.charAt(指定索引);
 * -3).返回值:如果找到 -> 返回对应字符
 *           如果未找到 -> 返回"" -> 空字符串
 * -4).是否改变原字符串:否
 */

②.charCodeAt(索引);

    // B.charCodeAt(Xxx);
    console.log(str.charCodeAt(0));// 打印 22909
    console.log(str)// 打印 好好学习,天天向上

/**
 * -1).用处:通过指定索引查找对应字符串所对应的Unicode编码
 * -2).用法:str.charCodeAt(指定索引);
 * -3).返回值:如果找到 -> 返回指定位置的字符的Unicode编码
 *           如果未找到 -> 返回NaN
 * -4).是否改变原字符串:否
 */

③.match("字符"/正则表达式); -> 支持正则表达式

    console.log(str.match("天"));// 打印 [ '天', index: 5, input: '好好学习,天天向上' ]
    console.log(Object.prototype.toString.call(str.match("天")));// 打印 [object Array]
    console.log(str.match(/[好]/g));// 打印 [ '好', '好' ]
    console.log(str);// 打印 好好学习,天天向上

/**
 * -1).用处:通过指定字符查找对应字符,支持正则表达式
 * -2).用法:str.match("字符"/正则表达式);
 * -3).返回值:如果找到 -> 返回一个存储指定字符的数组
 *           如果未找到 -> 返回null
 * -4).是否改变原字符串:否
 */

> -3).字符串的截取

①.substr(起始索引, 截取个数);

    // A.substr(num1, num2);
    console.log(str.substr(0, 2));// 打印 好好
    console.log(str);// 打印 好好学习,天天向上

/**
 * -1).用处:截取字符串
 * -2).用法:str.substr(起始索引, 截取的个数);
 * -3).返回值:返回一个截取的新字符串
 * -4).是否改变原字符串:否
 */

## 拓展 -> 基于substr方法实现字符串克隆

console.log(str.substr(0, str.length));// 打印  好好学习,天天向上

②.substring(起始索引, 结束索引);左闭右开

    // B.substring(起始索引, 结束索引);左闭右开
    console.log(str.substring(0, 4));// 打印 好好学习
    console.log(str);// 打印 好好学习,天天向上

/**
 * -1).用处:截取字符串
 * -2).用法:str.substring(起始索引, 结束索引);
 * -3).返回值:返回一个截取的新字符串
 * -4).是否改变原字符串:否
 */

## 拓展 -> 基于substring方法实现字符串克隆

    // 拓展 ->  基于substring方法实现字符串克隆
    console.log(str.substring(0, str.length));// 打印 好好学习,天天向上

③.slice(起始索引, 结束索引);左闭右开,支持负数索引

    // C.slice(起始索引, 结束索引);
    console.log(str.slice(0, 4));// 打印 好好学习
    console.log(str.slice(0, -1));// 打印 好好学习,天天向

/**
 * 负数索引的计算方式:                        9  + -1
 * str.slice(0, -1) => str.slice(0, str.length + -1)
 */

/**
 * -1).用处:截取字符串,支持负数索引
 * -2).用法:str.slice(起始索引, 结束索引);
 * -3).返回值:返回一个截取的新字符串
 * -4).是否改变原字符串:否
 */

## 拓展 -> 基于slice方法实现字符串克隆

console.log(str.slice(0, str.length));// 打印 好好学习,天天向上

> -4).字符串拆分、替换

①.拆分:split("分隔符");

    // A.split("分隔符");
    console.log(str.split(","));// 打印 [ '好好学习', '天天向上' ]
    console.log(str);// 打印 好好学习,天天向上

/**
 * -1).用处:分割字符串
 * -2).用法:str.split("分隔符");
 * -3).返回值:返回分割完成的字符串数组
 * -4).是否改变原字符串:否
 */

②.替换:replace("被替换字符", "替换字符");

    let strr = str.slice(0, str.length);
    console.log(strr.replace("好好", "认真"));// 打印 认真学习,天天向上
    console.log(strr);// 打印 好好学习,天天向上

/**
 * -1).用处:替换指定字符
 * -2).用法:str.replace("旧字符串", "新字符串");
 * -3).返回值:返回替换完成的字符串
 * -4).是否改变原字符串:否
 */

> -5).字符的大小写转换

①.小写转大写:toUpperCase();

    // A.toUpperCase
    strr = "Hello World";
    console.log(strr.toUpperCase());// 打印 HELLO WORLD
    console.log(strr);// 打印 Hello World

②.大写转小写:toLowerCase();

    strr = strr.toUpperCase();
    console.log(strr);// 打印 HELLO WORLD
    console.log(strr.toLowerCase());// 打印 hello world

> -6).查找指定字符

①.includes("指定字符");在整个字符串中找

    // A.includes("指定字符");
    console.log(str.includes("天"));// 打印 true
    console.log(str);// 打印 好好学习,天天向上

/**
 * -1).用处:查找指定字符
 * -2).用法:str.includes("指定字符");
 * -3).返回值:如果找到 -> 返回true
 *           如果未找到 -> 返回false
 * -4).是否改变原字符串:否
 */

②.startsWith("指定字符");仅仅在开头找

    // B.startsWith("指定字符");
    console.log(str.startsWith("好"));// 打印 true
    console.log(str);// 打印 好好学习,天天向上

/**
 * -1).用处:查找指定字符(仅查找字符串开头)
 * -2).用法:str.startsWith("指定字符");
 * -3).返回值:如果找到 -> 返回true
 *           如果未找到 -> 返回false
 * -4).是否改变原字符串:否
 */

③.endsWith("指定字符");仅仅在结尾找

    // C.endsWith("指定字符");
    console.log(str.endsWith("上"));// 打印 true
    console.log(str);// 打印 好好学习,天天向上

/**
 * -1).用处:查找指定字符(仅查找字符串结尾)
 * -2).用法:str.endsWith("指定字符");
 * -3).返回值:如果找到 -> 返回true
 *           如果未找到 -> 返回false
 * -4).是否改变原字符串:否
 */

> -7).重复字符串

①.repeat(Xxx);

/**
 * 注意:
 *  -1).如果参数为小数则向下取整。
 *  -2).如果参数为非有效数字(非数字字符串/NaN)则按0计算重复次数。
 *  -3).如果参数是数字字符串/布尔值,先进行数据类型转换为Number再计算重复次数。
 */

    console.log(str.repeat(2.6));// 打印 好好学习,天天向上好好学习,天天向上
    console.log(str);// 打印 好好学习,天天向上
    console.log(str.repeat("哈"));// 打印为空
    console.log(str.repeat(NaN));// 打印为空
    console.log(str.repeat("2"));// 打印 好好学习,天天向上好好学习,天天向上
    console.log(str.repeat(true));// 打印 好好学习,天天向上

/**
 * -1).用处:重复字符串
 * -2).用法:str.repeat(Xxx);
 * -3).返回值:重复指定次数的字符串
 * -4).是否改变原字符串:否
 */

> -8).字符串补全

①.padStart(指定字符串长度, 填充元素);在开头填充

    // A.padStart(指定字符串的长度, 替换字符);
    console.log(str.padStart(11, "ab"));// 打印 ab好好学习,天天向上
    console.log(str);// 打印 好好学习,天天向上

/**
 * -1).用处:字符串补全(从头补全)
 * -2).用法:str.padStart(指定字符串的长度, 替换字符);
 * -3).返回值:补全后的字符串
 * -4).是否改变原字符串:否
 */

②.padEnd(指定字符串长度, 填充元素);在结尾填充

    // B.padEnd(指定字符串的长度, 替换字符);
    console.log(str.padEnd(11, "ab"));// 打印 好好学习,天天向上ab
    console.log(str);// 打印 好好学习,天天向上

/**
 * -1).用处:字符串补全(从尾补全)
 * -2).用法:str.padStart(指定字符串的长度, 替换字符);
 * -3).返回值:补全后的字符串
 * -4).是否改变原字符串:否
 */

> -9).字符串去除首尾空格

①.trim();去除首尾空格

    let str_4 = " 好好 学习 ";
    console.log(str_4.trim());//好好 学习
    console.log(str_4);// 好好 学习

/**
 * -1).用处:字符串去除空格
 * -2).用法:str.trim();
 * -3).返回值:返回去除首尾空格的新字符串
 * -4).是否改变原字符串:否
 */

二、字符串遍历器

for ... of ...

for(let item of str) {
        console.log(item);
        /**
         * 天
         * 天
         * 向
         * 上
         */
    }

三、模板字符串

定义变量

let price = 100;

记得我们ES5包括之前拼接字符串都是一个耗时、不爽的操作...一溜加号,写起来费劲看着也不好看

    let str_1 = "苹果价格:" + price + "元";
    console.log(str_1);// 打印 苹果价格:100元

ES6的模板字符串:解决了这个问题 ...

## 模板字符串的使用方式:通过``(``在tab键上面那个键)包裹,通过${Xxx}引用变量。

    // ES6的模板字符串 -> 通过``(``在tab键上面那个键)包裹,通过${Xxx}引用变量。
    str_1 = `苹果价格:${price}元`;
    console.log(str_1);// 打印 苹果价格:100元

这样一来不仅不用写加号,而且更加直观,模板字符串还有一个好处就是保留格式:

ES5

    let str_2 = "1" +
        "2";
    console.log(str_2);// 打印 12

ES6的模板字符串会保留我们的敲'回车'以后的格式

    let str_3 = `1
    2`;
    console.log(str_3);

打印结果:↓↓↓

总结:本章节主要介绍了字符串的常用的20种方法以及ES6提供的字符串遍历器和模板字符串。基本上本片博文涵盖了我们日常开发在字符串方面的绝大多数操作。希望与大家共勉!!!如有意见或者建议请在下方留言,我会在第一时间回复!!!

(JavaScript - 原生)字符串的20个常用方法 + 字符串遍历器 + 模板字符串

(JavaScript - 原生)字符串的20个常用方法 + 字符串遍历器 + 模板字符串

猜你喜欢