Javascript 常用數字與日期顯示格式

這篇主要是筆記一下幾個常用，卻又容易忘記的處理數字與日期格式的方式。

數字千位分隔符

以往（查了一下caniuse應該是2017, 2018，瀏覽器還不支援Intl以前）要在數字上加上分隔用的逗點（如：19,890,604）只能自己手工處理。例如下面這樣的方式：

function numberFormat (n) {
  n = n.toString()

  const g = 3
  const firstIdx = n.length % g
  const count = Math.floor(n.length / g) + 1

  let result = ''

  for (let i = 0; i < count; i++) {
    const idx = firstIdx + i * g

    result += n.substring(idx - g, idx)

    if (i < count - 1 && idx !== 0) {
      result += ','
    }
  }

  return result
}

numberFormat(2500) // 2,500

比較快一點還可以先轉成陣列，反向後再來處理，處理完再反向輸出。雖然比純字串處理來的快一些，但只是為了要顯示逗點而已，需要這樣大費周章總是零人不快。

不過自從有了Intl之後，我們可以用Intl的NumberFormat()輕鬆完成心願：

new Intl.NumberFormat().format(2500) // 2,500

簡短幾個字就完成需求，心情非常爽快！

日期／時間

接下來是常用到的日期顯示。以往要顯示 2022-12-12 這樣的日期格式，如果不想用 moment.js 這樣的時間套件，也是要自己幹。蠻幹的方法可能會像這樣：

function dateFormat (timestamp) {
  const d = new Date(timestamp)
  return 'YYYY-MM-DD'.replace('YYYY', d.getFullYear())
    .replace('MM', String(d.getMonth() + 1).padStart(2, '0'))
    .replace('DD', String(d.getDate()).padStart(2, '0'))
}

dateFormat(1670813200000) // 2022-12-12

比較聰明的方式是用 toISOString() 再取出要的部分，但因為 toISOString() 回傳的是 UTC 時間，我們必須再透過 getTimezoneOffset() 換算一下：

const timezoneOffset = new Date().getTimezoneOffset() * 60 * 1000
new Date(1670813200000 - timezoneOffset).toISOString().slice(0, 10) // 2022-12-12

// or

const timezoneOffset = new Date().getTimezoneOffset() * 60 * 1000
new Date(1670813200000 - timezoneOffset).toISOString().split('T')[0]

但還有更簡單的方式，直接用 toLocaleString(‘sv’)，sv代表的是瑞典的時間格式，而瑞典的時間格式剛剛好是我們常用的yyyy-MM-dd HH:mm:ss格式，這樣就剛好讓我們可以取我們要的部分：

new Date(1670813200000).toLocaleString('sv').slice(0, 10) // 2022-12-12

// or

new Date(1670813200000).toLocaleString('sv').split(' ')[0] // 2022-12-12

再來是也很常用到的日期加上時間的 yyyy-MM-dd HH:mm:ss 格式，我們可以用toISOString來達成，如下：

new Date(1670813200000).toLocaleString('sv') // '2022-12-12 10:46:40'

單純時間的 HH:mm:ss 格式：

new Date(1670813200000).toLocaleString('sv').split(' ')[1] // '10:46:40'

數字補零

數字左方碼數不足補零，這個應該是最常用到的了。舉凡日期、時間、索引都有可能用到。以前可能會這麼寫：

function padStart (n, t, w) {
  n = n.toString()
  return n = n.length > t ? n : w.repeat(t - n.length) + n
}

console.log(padStart(1212 ,6, '0')) // '001212'

2016之後，可以這樣輕鬆達成：

String(1212).padStart(6, '0') // '001212'