【JavaScript】内置对象 - 字符串对象 ⑦ ( String 字符串替换 | replace 函数 | replaceAll 函数 | String 字符串切割 | split 函数 )

韩曙亮

发布于 2024-06-10 08:10:24

610

发布于 2024-06-10 08:10:24

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

String 字符串对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

一、String 字符串替换

1、replace 函数替换字符串

replace 函数的作用是字符串替换 ;

replace 函数原型 : 将匹配的 pattern 模式的子字符串替换为 replacement ;

replace(pattern, replacement)

pattern 参数 : 是字符串或正则表达式 , 传入的对象必须有 Symbol.replace 函数 ;
replacement 参数 : 被替换的字符串 ;
返回值是已经替换好的新的字符串 , 原字符串不变 ;

如果 pattern 参数是字符串 , 则默认只替换一次 , 将第一个匹配的字符串进行替换 , 后面就不再进行替换 ;

下面的字符串中有 2 哥 l 字符 , 使用 replace 函数进行替换 , 只替换了第一个 l 字符 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 给定一个字符串
        var str = 'Hello';

        // 字符串替换
        console.log(str.replace('l', 'A'));
    </script>
</head>

<body>
</body>

</html>

执行结果 :

2、使用 replace 函数替换所有匹配字符串

使用 indexOf 函数 , 可以获取子字符串在当前字符串的索引位置 , 如果查询的字符串中没有对应的子字符串 , 则返回 -1 ;

在下面的代码中 , 使用 indexOf 获取的索引值作为循环条件 , 如果索引值不为 -1 则执行循环体内容 , 在循环体内进行 replace 函数替换操作 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 给定一个字符串
        var str = 'Hello';

        // 字符串替换
        //console.log(str.replace('l', 'A'));

        // 替换所有符合要求的字符串
        while (str.indexOf('l') != -1) {
            str = str.replace('l', 'A');
        }
        // 打印最终的字符串替换结果
        console.log(str);

    </script>
</head>

<body>
</body>

</html>

执行结果 :

3、replaceAll 函数替换字符串

replaceAll 函数替换字符串中的子字符串 , 可以一次性替换所有符合要求的字符串 ;

函数原型如下 :

replaceAll(pattern, replacement)

pattern 参数 : 是字符串或正则表达式 , 传入的对象必须有 Symbol.replace 函数 ;
replacement 参数 : 被替换的字符串 ;
返回值是已经替换好的新的字符串 , 原字符串不变 ;

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 给定一个字符串
        var str = 'Hello';

        // 字符串替换
        console.log(str.replaceAll('l', 'A'));
    </script>
</head>

<body>
</body>

</html>

执行结果 :

二、String 字符串转数组

1、split 函数切割字符串

split 函数可以根据字符串中的子字符串或正则表达式作为切割符号 , 将字符串切割成若干个子字符串组成的数组 ;

split 函数原型 :

split(separator)
split(separator, limit)

separator 参数 : 作为分割依据的字符串 , 如果省略该参数 , 或传入 undefined 值 , 则返回一个数组 , 数组中只有一个元素 , 就是原字符串 ;
limit 参数 : 限制字符串切割的数量 , 可省略 , 原来切割 5 个子字符串 , 设置 limit 为 3 , 则切割完第二个元素后 , 将后面所有的内容都划分到第三个元素中 ;

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/split

2、代码示例 - 切割字符串

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 给定一个字符串
        var str = 'Blue,Red,Purple';

        // 字符串切割
        console.log(str.split(','));
    </script>
</head>

<body>
</body>

</html>

执行结果 :