<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          字符串拼接引發的BUG

          時間:?2017-11-20閱讀:?953標簽:?字符串

          譯者按: bug雖小,卻是個磨人的小妖精!

          原文: Fixing a bug: when concatenated strings turn into numbers in JavaScript 
          譯者: Fundebug

          為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用于學習。

          這是一篇很簡短的博客,記錄了我今天早上花了一個小時才解掉的一個bug。


          準備工作

          在已有的網站頁面,我們已經有一段JavaScript代碼用于構建字符串并把它插入到DOM中,如下所示:

          function GetTemplate(url, html)
          {
          // 省掉部分細節代碼
          // ...
          var template = '<div><a href="'
          + url
          + '" target="_blank"><strong>Details: </strong><span>'
          + html
          + '</span></a></div>';
          return template;
          }

          請忽略這段代碼的粗糙。接下來,我們的需求很簡單:如果summary存在,那么在<strong>標簽前面添加一個額外的<span>標簽將該值顯示出來。是不是很簡單?我們來試一試。


          首次嘗試

          我快速實現了如下代碼:

          function GetTemplate(url, html, summary) {
          // other details removed
          var template = '<div><a href="'
          + url
          + '" target="_blank">';
          if(summary) {
          template += '<span>'
          + summary
          + '</span>';
          }
          template +=
          +'<strong>Details: </strong><span>'
          + html
          + '</span></a></div>';
          return template;
          }

          看上去一切OK,沒有問題。F5刷新頁面,看起來不大對:

          The summary NaNThis is the inner message


          你知道哪里出問題了嗎?

          由上面的代碼生成的HTML長這樣:

          <div class="something"><a target="blank">
          <span class="summary">The summary</span>NaNThis is the inner message</span></a>
          </div>

          發現問題了嗎?如果沒發現,我們接著往下看。

          你的線上代碼真的沒有BUG嗎?歡迎免費使用Fundebug!我們可以幫助您第一時間發現BUG!


          字符串拼接 vs 加法

          仔細查看生成的HTML代碼,你會發現NaN出現在</span>標記的后面,然而<strong>標簽不見了。NaN是一個很好的線索,表明這里有類型轉換發生,并且是轉換為Number類型,但是我當時一直沒有找到發生轉換的原因!

          接下來,我們先溫習一下JavaScript基礎知識。在JavaScript中,根據+左右兩邊變量的類型的不同,+符號可以用于數字相加或則字符串拼接。

          console.log('value:' + 3); // 'value:3'
          console.log(3 + 1); // 4
          console.log('value:' + 3 + '+' + 1); // 'value:3+1'
          console.log('value:' + 3 + 1); // 'value:31'
          console.log('value:' + (3 + 1)); // 'value:4'
          console.log(3 + ' is the value'); // '3 is the value'

          在上面的這些例子中,如果+的任何一邊是字符串,那么另一邊一定會轉換為字符串。否則,將看做是數字相加。

          因此,NaN預示著一定是字符串被誤用為數字了。但我并沒有使用parseInt()函數做類型轉換,所以邏輯上說不通啊!


          問題原因

          最終,我逐步縮小出錯區域,發現是如下代碼出錯:

          template +=
          +'<strong>Details: </strong><span>'
          + html
          + '</span></a></div>';

          如果你還是沒看出來,那么我們換個寫法:

          template += +'<strong>Details: </strong><span>' + html + '</span></a></div>';

          我用了string += +string這樣的寫法,也就是說:由于寫代碼的時候拷貝黏貼,不小心整了一個多余的+號?所以,相當于使用了一元運算+。根據一元運算符(+)的官方解釋:+c會顯示地將c轉換為Number類型。

          這就是我的代碼出現bug的根源:一元運算符+號嘗試將<strong>Details: </strong><span>轉換為數字,但是失敗了返回NaN。然后NaN又轉換為字符串拼接起來。當我把這個額外的+刪掉后,代碼就正確運行了。


          額外建議

          另外值得一提的是,我使用了gulp-uglify來壓縮我的JavaScript代碼。在構建過程中,一元運算(+'<strong>Details: </strong><span>')已經在壓縮后的代碼中存儲為NaN了。Gulp已經識別出代碼錯誤。

          從這一次Debug的經歷吸取了一個教訓:不要馬馬虎虎的拷貝黏貼代碼!而且我立即想到如果有一個小的gulp插件可以識別并提醒壓縮代碼中有莫名其妙的NaN的話,也可以適當避免問題。


          補充

          > parseInt('<strong>Details: </strong><span>')
          NaN
          > +'<strong>Details: </strong><span>'
          NaN

          版權聲明:
          轉載時請注明作者Fundebug以及本文地址:
          https://blog.fundebug.com/2017/11/20/bug-fix-concatenated-string-trun-into-numbers/
          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/124

          javaScript 如何使用js追加字符串呢?

          字符串的操作是任何一門計算機語言都必須面對的問題,那么js中我們該如何對字符串進行相關操作列,下文將一一道來: 常見的字符串追加有以下三種需求:

          Js實現字符串壓縮

          字符串壓縮。利用字符重復出現的次數,編寫一種方法,實現基本的字符串壓縮功能。比如,字符串aabcccccaaa會變為a2b1c5a3。若“壓縮”后的字符串沒有變短,則返回原先的字符串。你可以假設字符串中只包含大小寫英文字母

          比較兩個帶退格鍵的字符串

          從后往前遍歷,記錄要忽略掉的字符;使用棧,從前往后處理;使用歸并排序合并數組的形態,從后往前比較

          js如何截取字符串后幾位?

          javascript截取字符串的方法有substring(start,stop)、substr(start,length)、slice(start,end),通過設置其中參數就可以截取字符串后幾位。

          js精確計算字符串字節長度

          精確計算字符串長度,不能簡單使用length,比如雙字節字符會被計算成一個數量,所以需要計算字符串的字節數進行對比.

          javascript如何設置字符串首字母大寫?

          給出一個字符串,如何確保字符串的首字母都大寫?下面本篇文章就來給大家介紹一下使用javascript設置首字母大寫的方法,希望對大家有所幫助。在javascript中,可以使用slice()方法、toUpperCase()方法和toLowerCase()方法來設置首字母大寫

          javascript中如何截取字符串?

          JavaScript中截取字符串有三種方法,分別是substring(),substr(),split()。下面本篇文章就來給大家介紹一下它們的使用方法,希望對大家有所幫助。

          JS字符串首字母都大寫的幾種方法

          正則+replace思路:用正則將字符串拆分為單詞數組,并對每個單詞進行首字母大寫處理。這里簡單的把字母、數字、下劃線和單撇號都視為了單詞成員。

          常用的Js字符串方法

          startsWith()檢查字符串是否以指定的字符開頭,endsWith()檢查字符串是否以指定的字符結束,includes()檢查字符串是否包含指定的字符,slice()復制字符串的某些部分而不修改原字符串

          JS/CSS實現字符串單詞首字母大寫

          正則表達式b會把英文縮寫,譬如m拆分成兩個部分,導致輸出為所以不能使用b ;b匹配一個單詞邊界,也就是指單詞和空格間的位置;w:匹配包括下劃線的任何單詞字符;*:匹配前面的子表達式零次或多次

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网