JavaScript 字符串 trim() 方法

JavaScript 字符串 trim() 方法删除字符串两侧的空格并返回一个新字符串。如果原始字符串的开头和结尾没有空格，则返回相同的字符串。

要仅从字符串的一端删除空格，可以使用 trimStart() 或 trimEnd() 方法，具体取决于要修剪的字符串的哪一端。

语法

以下是 JavaScript 字符串 trim() 方法的语法 -

trim()

参数

• 它不接受任何参数。

返回值

此方法返回一个从开头和结尾都删除空格的新字符串。

示例 1

如果原始字符串两端没有空格，因此返回相同的字符串。

<html>
<head>
<title>JavaScript String trim() Method</title>
</head>
<body>
<script>
   const str = "Tutorials Point";
   document.write("Original string: ", str);
   document.write("<br>New string: ", str.trim());
</script>    
</body>
</html>

输出

上述程序返回"Tutorials Point"。

Original string: Tutorials Point
New string: Tutorials Point

示例 2

在此示例中，我们使用 JavaScript 字符串 trim() 方法删除字符串"Hello World!"两端的空格。

<html>
<head>
<title>JavaScript String trim() Method</title>
</head>
<body>
<script>
   const str = " Hello World! ";
   document.write("Original string: ", str);
   document.write("<br>Length of original string: ", str.length);
   document.write("<br>New string: ", str.trim());
   document.write("<br>Length of new string: ", str.trim().length);
</script>    
</body>
</html>

输出

执行上述程序后，它会修剪两端的空格并返回一个新字符串"Hello World!"。

Original string: Hello World!
Length of original string: 14
New string: Hello World!
Length of new string: 12

示例 3

让我们看看 JavaScript 字符串 trim() 方法的实际用法。此方法可用于防止用户在输入字段中使用空的用户名和密码登录。

<html>
<head>
<title>JavaScript String trim() Method</title>
</head>
<body>
<input type="text" placeholder="Username" id = 'uname'>
<br><br>
<input type="password" placeholder="Password" id = 'psw'>
<br><br>
<button onclick="Login()">Submit</button>
<span id = 'msg'></span>
<script>
   function Login(){
      let uname = document.getElementById("uname").value;
      let psw = document.getElementById("psw").value;
      let msg = document.getElementById("msg");
      if(uname.trim().length == 0){
         msg.innerHTML = "Username can't be empty...!";
      }
      else if(psw.trim().length == 0){
         msg.innerHTML = "Password can't be empty...!";
      }
      else{
         msg.innerHTML = "Submitted successfully...!";
      }
    }
</script>    
</body>
</html>

输出

程序在屏幕左上角显示一个用户界面。它包含两个输入字段(用户名和密码)以及一个按钮。如果输入字段为空，点击按钮后，按钮附近会显示一些错误消息。