本文详细介绍 ES5 中字符串新增的 trim() 方法，用于去除字符串首尾空白字符。通过对比未使用与使用 trim() 的表单提交代码，演示如何解决仅输入空格即可提交的逻辑漏洞，帮助开发者掌握该方法的实际应用场景。
文章导读：
本文重点讲解 ES5 标准中字符串对象新增的 trim() 方法。该方法专门用于处理字符串中的空白字符，下文将详细说明其具体用法及在实际开发中的应用场景。
一：trim() 方法的用法
调用格式为：str.trim()
该方法仅能去除字符串头部和尾部的空格，字符串中间存在的空格不会被移除。需要注意的是，trim() 返回的是一个新字符串，原字符串保持不变，因此需要定义变量来接收处理后的结果。
<script>
var str=' aaa '
console.log('字符串原先为:'+str+' 长度为:'+str.length);
var str1=str.trim()
console.log('使用trim后字符串为:'+str1+' 长度为:'+str1.length);
</script>执行 trim 方法后，字符串原本位于首尾的空格已被清除，输出的长度也仅包含有效字符的长度。
二：trim() 实际开发中的使用
在表单提交场景中，通常要求输入框不能为空。然而，如果用户仅输入若干空格，传统逻辑可能误判为有内容从而允许提交，这不符合业务需求。引入 trim() 方法可以完美解决这一逻辑缺陷。
2.1 实战应用
下面通过两个具体的代码示例来演示 trim() 的实际应用：分别展示未使用 trim 和使用了 trim 的表单提交逻辑。若表单内容符合规范，则在下方的段落中显示输入内容；若不符合要求，则触发弹窗提示。
2.1.1 未使用 trim 的表单提交
<body>
<div class="box">
<input type="text" placeholder="请输入内容">
<button>提交</button>
<p></p>
</div>
<script>
var ipt=document.querySelector('input')
var btn=document.querySelector('button')
var p=document.querySelector('p')
btn.addEventListener('click',function(){
if(ipt.value===''){
alert('请输入内容')
}else{
p.innerHTML=ipt.value;
}
})
</script>
</body>当输入框完全为空时，系统会正常弹出错误提示。
然而，当仅输入空格时，系统判定为符合要求且未弹出错误提示，这显然违背了防止空提交的设计初衷。
2.1.2 使用 trim 的表单提交
解决上述问题的方法非常简单，只需在获取输入值后增加一行代码：var str=ipt.value.trim()。该行代码获取表单值并清除其前后空格，后续判断逻辑基于处理后的 str 变量。这意味着，如果用户仅输入空白字符，处理后结果为空字符串，从而触发非空校验，成功解决了输入空格即可提交表单的问题。
<body>
<div class="box">
<input type="text" placeholder="请输入内容">
<button>提交</button>
<p></p>
</div>
<script>
var ipt=document.querySelector('input')
var btn=document.querySelector('button')
var p=document.querySelector('p')
btn.addEventListener('click',function(){
var str=ipt.value.trim() //加入此行代码即可
if(str===''){
alert('请输入内容')
}else{
p.innerHTML=str;
}
})
</script>
</body>问题得到顺利解决。
至此，关于 JavaScript 字符串新增方法 trim() 的使用说明已介绍完毕。如需了解更多相关 JS trim 内容，请搜索本站历史文章或继续阅读后续文章，感谢大家的支持！