徐州市城乡建设局门户网站,自己能不能做个网站,建设集团网站公司,项目建设背景与必要性文章导读#xff1a; 这篇文章给大家讲解在 ES5 中字符串新增方法之一#xff1a;trim()#xff0c;这个方法用于对空白字符的处理#xff0c;这篇文章带给大家这个方法的用法以及其使用用途。 文章目录#xff1a;
一#xff1a;trim() 方法的用法
使用格式#xff1… 文章导读 这篇文章给大家讲解在 ES5 中字符串新增方法之一trim()这个方法用于对空白字符的处理这篇文章带给大家这个方法的用法以及其使用用途。 文章目录
一trim() 方法的用法
使用格式
使用说明
二trim() 实际开发中的使用
2.1 实战应用 2.1.1 未使用 trim 的表单提交 2.1.2 使用 trim 的表单提交 一trim() 方法的用法 使用格式 str.trim() 使用说明 只能去除某字符串头和尾的空格字符串中间夹杂的空格无法去除。并且其返回的是一个新的字符串要定义一个变量去接收新字符串。 scriptvar str aaa console.log(字符串原先为:str 长度为:str.length);var str1str.trim()console.log(使用trim后字符串为:str1 长度为:str1.length);/script 可以看到使用 trim 方法后字符串原先前后的空格被清除掉了长度也输出了字符本身的长度 二trim() 实际开发中的使用 我们在提交表单时如果输入框内没有内容会禁止提交但是有个问题是如果我输入几个空格就可以正常提交了这显然是不符合我们的要求的但是有了 trim() 方法就可以完美解决这个 bug。 2.1 实战应用 此处我们来一个实际开发中的小应用来看看 trim() 方法学会了没有此处我会写两部分代码分别为没有使用 trim 的表单提交以及使用了 trim 的表单提交如果表单内容没问题则会将输入内容打印在下方不符合要求则会弹出弹窗 2.1.1 未使用 trim 的表单提交
bodydiv classboxinput typetext placeholder请输入内容button提交/buttonp/p/divscriptvar iptdocument.querySelector(input)var btndocument.querySelector(button)var pdocument.querySelector(p)btn.addEventListener(click,function(){if(ipt.value){alert(请输入内容)}else{p.innerHTMLipt.value;}})/script
/body 我们发现不输入内容的话就有正常的错误弹窗 但是只输入空格的话我们发现符合了要求而且没有错误弹窗这不符合我们的目的 2.1.2 使用 trim 的表单提交 解决上述问题只需要加一行代码即可var stript.value.trim()这行代码拿到表单值并对其清除了前后空格后续执行判断时拿到的值是没有前后空格的也就意味着如果输入空白字符则会将处理为没有输入内容从而解决了输入空格提交表单没有弹窗的情况 bodydiv classboxinput typetext placeholder请输入内容button提交/buttonp/p/divscriptvar iptdocument.querySelector(input)var btndocument.querySelector(button)var pdocument.querySelector(p)btn.addEventListener(click,function(){var stript.value.trim() //加入此行代码即可if(str){alert(请输入内容)}else{p.innerHTMLstr;}})/script
/body 顺利解决问题
