快捷導航

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

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

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

一：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() 實際開發(fā)中的使用

我們在提交表單時如果輸入框內(nèi)沒有內(nèi)容，會禁止提交，但是有個問題是如果我輸入幾個空格，就可以正常提交了，這顯然是不符合我們的要求的，但是有了 trim() 方法，就可以完美解決這個 bug。

2.1 實戰(zhàn)應用

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

2.1.1 未使用 trim 的表單提交

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

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

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

2.1.2 使用 trim 的表單提交

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

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

順利解決問題