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

打印结果:↓↓↓

java 字符串生成富文本内容 java 字符串模版_字符串

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