JavaScript 字符串去除空格

在 JavaScript 中,如果想要去除字符串中的空格,常用的有以下 3 种方法。

  • trim()
  • trimStart()
  • trimEnd()

使用 trim() 去除首尾空格

在 JavaScript 中,我们可以使用 trim() 方法同时去除字符串 “开头” 和 “结尾” 的空格。

语法:

str.trim()

说明:

trim() 方法不接收任何参数。

注意: trim() 方法不会改变原字符串,而是返回一个新字符串。

示例 1:trim() 的基本用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const str = "  lvye  ";
        const result = str.trim();

        console.log("原始字符串(长度):", str.length);
        console.log("去除空格后(长度):", result.length);
    </script>
</body>
</html>

运行结果如下。

原始字符串(长度): 8
去除空格后(长度): 4

分析:

"  lvye  " 去除首尾空格后,会变为 "lvye",此时字符串长度由 8 变为 4。去除字符串首尾空格是非常有用的,比如在表单提交时,很多时候我们需要去除输入文本首尾的空格,然后再进行提交。

trimStart() 和 trimEnd():分别去除首尾空格

在 ES2019 (ES6+) 中,还引入了更加精细的去除空格的方法:

示例 2:只去除 “开头” 的空格

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const str = "  lvye  ";
        const result = str.trimStart();

        console.log("原始字符串(长度):", str.length);
        console.log("去除空格后(长度):", result.length);
    </script>
</body>
</html>

运行结果如下。

原始字符串(长度): 8
去除空格后(长度): 6

分析:

"  lvye  " 去除开头空格后,会变为 "lvye  ",此时字符串长度由 8 变为 6。

示例 3:只去除 “结尾” 的空格

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const str = "  lvye  ";
        const result = str.trimEnd();

        console.log("原始字符串(长度):", str.length);
        console.log("去除空格后(长度):", result.length);
    </script>
</body>
</html>

运行结果如下。

原始字符串(长度): 8
去除空格后(长度): 6

分析:

"  lvye  " 去除结尾空格后,会变为 "  lvye",此时字符串长度由 8 变为 6。

思考: 如果想要去除字符串中所有的空格,应该怎样实现呢?(提示:replace() + 正则表达式)。

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号