初探 Intl.NumberFormat

前言

  這次來學習透過 Intl.NumberFormat 顯示貨幣價值，在此做個紀錄。

內容

  範例如下

let number = 1234;
//
console.log( new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' 
  }).format( number) );//1.234,00 €
//
console.log( new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' 
  }).format( number) );//￥1,234
//
console.log( new Intl.NumberFormat('zh-TW', { style: 'currency', currency: 'TWD' 
  }).format( number) );//$1,234.00

使用的方法跟其他的 Intl 差不多，不過要注意 currency 這個參數，這個參數引響顯示幣值的符號，要輸入的代碼可以在 [ en.wikipedia.org ] ISO 4217 查詢，區域碼會引響的是貨幣符號在前後與是否顯示小術後兩位。

參考資料

[ developer.mozilla.org ] Intl.NumberFormat

[ en.wikipedia.org ] ISO 4217

 改用凌晨的方式表達時間

前言

  Intl.DateTimeFormat() 有參數可以改以凌晨的方式來表達時間，在此把學習的過程做個紀錄。

內容

  範例如下

const date = new Date(Date.UTC(2020, 11, 20, 16, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h11',
  dayPeriod : 'narrow',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 凌晨0:23:16.738
//
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h11',
  dayPeriod : 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 凌晨0:23:16.738
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h11',
  dayPeriod : 'long',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 凌晨0:23:16.738

改變的方法是透過 dayPeriod ，參數有三種，分別是 narrow 、 short 與 long ，範例個別示範一次，要注意的是 dayPeriod  必須搭配 hourCycle 來使用，只有當 hourCycle  是 h11 與 h12 時才有作用，範例的結果三個都是一樣的，可能跟區域有關，換成 fr 的話，第三個會有不同。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor'

相關文章與資料

初探 Intl.DateTimeFormat

調整 Intl.DateTimeFormat 的格式

自訂 Intl.DateTimeFormat 的格式

調整 Intl.DateTimeFormat 的時間為 24 小時制

在 Intl.DateTimeFormat 顯示時區

 在 Intl.DateTimeFormat 顯示時區

前言

  先前使用 Intl.DateTimeFormat 都沒顯示時區，要如何顯示呢?在此把學習的過程做個紀錄。

內容

  範例如下

const date = new Date(Date.UTC(2020, 11, 20, 16, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [GMT+8]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'long',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [台北標準時間]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'shortOffset',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [GMT+8]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'longOffset',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [GMT+08:00]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'shortGeneric',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [台灣時間]
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  hourCycle : 'h23',
  timeZoneName : 'longGeneric',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  
}).format(date));//2020年12月21日 星期一 00:23:16.738 [台北標準時間]

透過 timeZoneName 可以顯示時區，但只能用於自訂格式，如果與 dateStyle 或 timeStyle 混用會報錯，有六種參數可以用， short 、 long 、shortOffset 、 longOffset 、 shortGeneric 與 longGeneric ，範例分別個示範一次。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor'

相關文章與資料

初探 Intl.DateTimeFormat

調整 Intl.DateTimeFormat 的格式

自訂 Intl.DateTimeFormat 的格式

調整 Intl.DateTimeFormat 的時間為 24 小時制

 進階調整 Intl.DateTimeFormat 的時間為 24 小時制

前言

  在先前的 調整 Intl.DateTimeFormat 的時間為 24 小時制 介紹了調整為 24 小時制的方法，但調整的方法其實不只這一種，有另外一種調整法，在此把學習的過程做個紀錄。

內容

  範例如下

const date = new Date(Date.UTC(2020, 11, 20, 16, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h23',
}).format(date));//2020/12/21 00:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h24',
}).format(date));//2020/12/21 24:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h12',
}).format(date));//2020/12/21 凌晨12:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hourCycle : 'h11',
}).format(date));//2020/12/21 上午0:23

上次 調整 Intl.DateTimeFormat 的時間為 24 小時制 是透過 hour12 來調整，這次會使用 hourCycle ，有 4 種參數可以調，分別是 h11 、h12 、h23 與 h24 ，範例都分別示範一次，同為24 小時制有兩種顯示方式，一種顯示 00 ，另一種顯示 24 ，h11 與 h12 也是一樣。使用上要注意 hour12 與 hourCycle  最好不要同時使用，可能在不同瀏覽器會有不同的結果，hour12  為 True 可以用 h12 來替代，為 False 時使用 h24 來替代，這樣就可以完全用不到 hour12  ，也就不會發生混用的情形。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor'

相關文章與資料

初探 Intl.DateTimeFormat

調整 Intl.DateTimeFormat 的格式

自訂 Intl.DateTimeFormat 的格式

調整 Intl.DateTimeFormat 的時間為 24 小時制

 調整 Intl.DateTimeFormat 的時間為 24 小時制

前言

  在先前示範 Intl.DateTimeFormat 都是採取 12小時制，會分上午或下午，要如何改成 24 小時制呢?在此把學習的過程做個紀錄。

內容

  範例如下

const date = new Date(Date.UTC(2020, 11, 20, 5, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
  hour12 : false
}).format(date));//2020/12/20 13:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3,
  formatMatcher:'best fit',
  hour12 : false
}).format(date));//2020年12月20日 星期日 13:23:16.738

透過第二個參數裡的 hour12 參數就可以調整成 24 小時制，該值預設是 true ，有舊是 12 小時制，將其設為 false 就是 24 小時制，此參數不管是常見的格式或自訂的格式都可以使用，範例分別都示範一次。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor'

相關文章與資料

初探 Intl.DateTimeFormat

調整 Intl.DateTimeFormat 的格式

自訂 Intl.DateTimeFormat 的格式

 自訂 Intl.DateTimeFormat 的格式

前言

  在之前的 調整 Intl.DateTimeFormat 的格式 示範如何調整格式，但都是常見的制式化格式，這些格式都不會顯示秒，如果要顯示秒就要靠訂定格式，在此把學習的過程做個紀錄。

內容

  範例如下

const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  dateStyle: 'short',
  timeStyle: 'short',
}).format(date));//2020/12/20 上午11:23
//
console.log(new Intl.DateTimeFormat('zh-tw',{
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second : 'numeric',
  fractionalSecondDigits: 3
}).format(date));//2020年12月20日 星期日 上午11:23:16.738

要自訂格式一樣是透過第二個參數，直接輸入要顯示的部分的參數即可，不只可以顯示秒，還可以顯示千分之一秒還有星期幾，這些是制式化格是不會顯示的，範例先示範制式化的格式，接著在示範這次的自訂格式，有一點是要注意的，制式化格式的參數 dateStyle 與 timeStyle ，式不可以跟自訂的參數混用的!只要混用就會報錯。

參考資料

[ developer.mozilla.org ] Intl.DateTimeFormat() constructor

相關文章與資料

初探 Intl.DateTimeFormat

調整 Intl.DateTimeFormat 的格式

 關於 smart failure predicted 的處理

前言

  最近有硬碟損壞，開機時會出現 smart failure predicted ，本以為硬碟就這麼毀了，資料來不及複製有些可惜，但查了一下網路發現這個訊息不是指硬碟毀了，在此把學習的過程做個紀錄。

內容

   smart failure predicted 指的是 smart test 有問題，不是硬碟毀了，指的是硬碟"快"毀了，既然是"快"毀了代表其實它還沒毀壞，可以在 BIOS 裡把 smart test 的選項關閉後再試著開機，這樣就可以進到作業系統把"快"毀了的硬碟資料複製出來。具體的操作可以參照以下

雖然我的主機板也是 ASUS ，但 Smart test 的選項位置與影片中的選項不一樣，但只要記得找 smart test 這個字詞，它的選項會是開與關，把它設為關閉後就可以跳過 smart failure predicted ，解著就可以進到作業系統。這個"快"毀了的硬碟在複製時會和一般的硬碟差很多，有的時候複製很正常，有的檔案複製時會像卡住一樣要複製很久，我的 2T 硬碟複製 4 天還沒結束，如果要複製"快"毀了的硬碟要準備好可以長時間不關機的環境。