【JavaScript 进阶教程】字符串新增方法 trim() 的说明与使用_js trim

最新推荐文章于 2024-07-01 12:34:45 发布

2401_84181193

最新推荐文章于 2024-07-01 12:34:45 发布

阅读量706

点赞数 13

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2401_84181193/article/details/138237631

版权

本文详细介绍了JavaScript的trim()方法如何用于去除字符串头尾空格，以及在实际开发中如何防止用户仅输入空格就提交表单的案例。同时提及了针对不同学习阶段的课程资源提供。

摘要由CSDN通过智能技术生成

一：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 实战应用

此处我们来一个实际开发中的小应用来看看 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()，这行代码拿到表单值并对其清除了前后空格，后续执行判断时拿到的值是没有前后空格的，也就意味着如果输入空白字符则会将处理为没有输入内容，从而解决了输入空格提交表单没有弹窗的情况

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

2401_84181193

关注

13
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript 进阶教程】字符串新增方法 trim() 的说明与使用_js trim

解决上述问题只需要加一行代码即可：var str=ipt.value.trim()，这行代码拿到表单值并对其清除了前后空格，后续执行判断时拿到的值是没有前后空格的，也就意味着如果输入空白字符则会将处理为没有输入内容，从而解决了输入空格提交表单没有弹窗的情况。此处我们来一个实际开发中的小应用来看看 trim() 方法学会了没有，此处我会写两部分代码：分别为没有使用 trim 的表单提交，以及使用了 trim 的表单提交，如果表单内容没问题则会将输入内容打印在下方，不符合要求则会弹出弹窗。
复制链接

扫一扫