JavaScript 字符串新增方法 trim() 的使用说明
文章导读：
这篇文章给大家讲解在 ES5 中字符串新增方法之一：trim()，这个方法用于对空白字符的处理，这篇文章带给大家这个方法的用法以及其使用用途。
一：trim() 方法的用法
使用格式： str.trim()
使用说明： 只能去除某字符串头和尾的空格，字符串中间夹杂的空格无法去除。并且其返回的是一个新的字符串，要定义一个变量去接收新字符串。
<script>
var str=' aaa '
console.log('字符串原先为:'+str+' 长度为:'+str.length);
var str1=str.trim()
console.log('使用trim后字符串为:'+str1+' 长度为:'+str1.length);
</script>可以看到使用 trim 方法后字符串原先前后的空格被清除掉了，长度也输出了字符本身的长度
二：trim() 实际开发中的使用
我们在提交表单时如果输入框内没有内容，会禁止提交，但是有个问题是如果我输入几个空格，就可以正常提交了，这显然是不符合我们的要求的，但是有了 trim() 方法，就可以完美解决这个 bug。
2.1 实战应用
p>此处我们来一个实际开发中的小应用来看看 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()，这行代码拿到表单值并对其清除了前后空格，后续执行判断时拿到的值是没有前后空格的，也就意味着如果输入空白字符则会将处理为没有输入内容，从而解决了输入空格提交表单没有弹窗的情况
<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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Uni-App用uView组件库中u-picker实现地区的省-市-区三级联动、确认及回显
最近项目要使用uni-app遇到省市县三级联动的问题,下面这篇文章主要给大家介绍了关于Uni-App用uView组件库中u-picker实现地区的省-市-区三级联动、确认及回显的相关资料,需要的朋友可以参考下2023-12-12
神奇的正则表达式可以帮助我们搞定所需的格式验证，常用的有手机号码，密码等，另附上做项目经常用到的一些正则，记录一下2014-09-09
这篇文章主要介绍了JS仿hao123导航页面图片轮播效果，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-09-09
JavaScript操作DOM元素的childNodes和children区别
这篇文章主要介绍了JavaScript操作DOM元素的childNodes和children区别,本文直接给出测试代码和运行效果来讲解它们之间的区别,需要的朋友可以参考下2015-04-04
前段时间项目需要用到js树，找了好多都不符合项目需求，后来发现了梅花雪树和js框架，类似C#名称空间的用法让我眼前一亮，遂拿来主义，读了几遍代码后就开工了（我是个急性子呵呵），完成了大部分，最近才找出来测试了下。2010-11-11
这篇文章主要为大家详细介绍了JavaScript canvas实现雨滴特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要为大家详细介绍了微信小程序实现循环嵌套数据选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
值得分享和收藏的xmlplus组件学习教程,xmlplus是一个设计非常独特 JavaScript 框架，用于快速开发前后端项目，感兴趣的小伙伴们可以参考一下2017-05-05
下面小编就为大家带来一篇JS 终止执行的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起 小编过来看看吧2016-11-11
这篇文章主要介绍了JS数组splice操作,结合实例形式分析了javascript使用splice方法删除数组元素相关操作技巧,需要的朋友可以参考下2019-10-10
最新评论