快捷導(dǎo)航

JavaScript?字符串新增方法?trim()?的使用說(shuō)明

更新時(shí)間：2022年09月06日 16:07:57 作者：卡卡西最近怎么樣

這篇文章主要介紹了JavaScript字符串新增方法trim()的使用說(shuō)明，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下

一：trim() 方法的用法

使用格式： str.trim()

使用說(shuō)明： 只能去除某字符串頭和尾的空格，字符串中間夾雜的空格無(wú)法去除。并且其返回的是一個(gè)新的字符串，要定義一個(gè)變量去接收新字符串。

     <script>
        var str='     aaa  '
        console.log('字符串原先為:'+str+'   長(zhǎng)度為:'+str.length);
        var str1=str.trim()
        console.log('使用trim后字符串為:'+str1+'   長(zhǎng)度為:'+str1.length);
     </script>

可以看到使用 trim 方法后字符串原先前后的空格被清除掉了，長(zhǎng)度也輸出了字符本身的長(zhǎng)度

二：trim() 實(shí)際開發(fā)中的使用

我們?cè)谔峤槐韱螘r(shí)如果輸入框內(nèi)沒有內(nèi)容，會(huì)禁止提交，但是有個(gè)問(wèn)題是如果我輸入幾個(gè)空格，就可以正常提交了，這顯然是不符合我們的要求的，但是有了 trim() 方法，就可以完美解決這個(gè) bug。

2.1 實(shí)戰(zhàn)應(yīng)用

p>此處我們來(lái)一個(gè)實(shí)際開發(fā)中的小應(yīng)用來(lái)看看 trim() 方法學(xué)會(huì)了沒有，此處我會(huì)寫兩部分代碼：分別為沒有使用 trim 的表單提交，以及使用了 trim 的表單提交，如果表單內(nèi)容沒問(wèn)題則會(huì)將輸入內(nèi)容打印在下方，不符合要求則會(huì)彈出彈窗

2.1.1 未使用 trim 的表單提交

<body>
    <div class="box">
        <input type="text" placeholder="請(qǐng)輸入內(nèi)容">
        <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('請(qǐng)輸入內(nèi)容')
            }else{
                p.innerHTML=ipt.value;
            }
        })
     </script>
</body>

我們發(fā)現(xiàn)不輸入內(nèi)容的話就有正常的錯(cuò)誤彈窗

但是只輸入空格的話我們發(fā)現(xiàn)符合了要求而且沒有錯(cuò)誤彈窗，這不符合我們的目的

2.1.2 使用 trim 的表單提交

解決上述問(wèn)題只需要加一行代碼即可：var str=ipt.value.trim()，這行代碼拿到表單值并對(duì)其清除了前后空格，后續(xù)執(zhí)行判斷時(shí)拿到的值是沒有前后空格的，也就意味著如果輸入空白字符則會(huì)將處理為沒有輸入內(nèi)容，從而解決了輸入空格提交表單沒有彈窗的情況

<body>
    <div class="box">
        <input type="text" placeholder="請(qǐng)輸入內(nèi)容">
        <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('請(qǐng)輸入內(nèi)容')
            }else{
                p.innerHTML=str;
            }
        })
     </script>
</body>

順利解決問(wèn)題