[ 開發日記 ] 使用 Vue 打造價格千分位符號時，遇到未輸入價格時的處理

因為網路上可以找到很多一樣的解決方式，加上這篇文章的主題也不是要記錄怎麼在數字中插入千分位和 $ 符號，所以就不囉嗦了。直接附上程式碼：

function (num) {
  const n = Number(num);
  return `$${n.toFixed(0).replace(/./g, (c, i, a) => {
    const currency = (i && c !== '.' && ((a.length - i) % 3 === 0) ? `, ${c}`.replace(/\s/g, '') : c);
    return currency;
  })}`;
}

Number(num)

因為我自己在上傳檔案時，有些部分沒有填入價格，意外發現如果沒有填入價格的話，頁面會很乾脆地顯示 $NaN 給你看。想想，這也是理所當然的，畢竟那個欄位真的就是沒有數字。

傳進的值是什麼？

一開始，我以為沒有填入價格的話，傳入的值會是空字串。測時一下，把空字串用 Number() 轉為數字，得到 0 。(這邊又是另一個意外，竟然是 0)。調整程式碼之後，發現還是不行。 最後，用 console.log 查看 num 發現，原來沒有價格的狀態下，傳進來的值是 undefined。

最後的處理方式

最後我是用 isNaN 做 if else 的過濾。

    const n = Number(num);
    if (isNaN(n)) {
        return num; //無價格時的處理
    } else {
        return `$${n.toFixed(0).replace(/./g, (c, i, a) => {
            const currency = (i && c !== '.' && ((a.length - i) % 3 === 0) ? `, ${c}`.replace(/\s/g, '') : c);
            return currency;
        })}`;
    }

這樣就 ok 了。