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

本文深入浅出地讲解了JavaScript中字符串的20种常用方法，包括查找、替换、截取等功能，并介绍了字符串遍历器及ES6模板字符串的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自：
https://blog.youkuaiyun.com/qq_39872652/article/details/81517626

(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);