中級 Pro ⏱ 25:00
08-3 (付費) 跨越國界:Intl 國際化與進階匹配
(Pro) 邁向國際化產品。學習使用 Intl API 處理多國語言貨幣與日期,並探索 2026 年正規表達式的進階特性。
08-3 (付費) 跨越國界:Intl 國際化與進階匹配
👋 **老師的話 (Script)**:
"當你的網站開始有來自全球的用戶時,你會發現『文字』變得非常複雜。
台灣人習慣 `NT$ 1,000`,但歐洲人可能習慣 `1.000,00 €`。
以前我們都要裝大型套件 (如 Moment.js),現在瀏覽器內建的 Intl 已經強大到不可思議。
同時,我也會教你 2026 年 Regex 那些『看後斷言』等魔鬼細節。準備好變強了嗎?“
1. Intl API:多國語言的守護者
不要再手動寫格式化函數了!
貨幣格式化
const amount = 1234567.89;
const twFormat = new Intl.NumberFormat('zh-TW', { style: 'currency', currency: 'TWD' });
console.log(twFormat.format(amount)); // "NT$1,234,568"
const deFormat = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
console.log(deFormat.format(amount)); // "1.234.567,89 €"
日期相對時間
如果你想寫「3 分鐘前」、「兩天前」:
const relative = new Intl.RelativeTimeFormat('zh-TW', { numeric: 'auto' });
console.log(relative.format(-1, 'day')); // "昨天"
console.log(relative.format(2, 'hour')); // "2 小時後"
2. 進階 Regex:斷言 (Assertions)
這能讓你根據「前面」或「後面」有沒有特定內容來做判斷。
- Lookahead (?=…):後面必須跟著…
- Lookbehind (?<=…):前面必須跟著…
// 只有在數字後面有 "元" 的時候才匹配數字
const priceRegex = /\d+(?=元)/;
"售價 100元".match(priceRegex); // "100"
"數量 5個".match(priceRegex); // null
3. Unicode 屬性匹配 (\p{…})
在 2026 年,我們經常用來處理 Emoji 或各國特殊字符:
const emojiRegex = /\p{Emoji}/u; // 需要 u 修飾符
console.log(emojiRegex.test("🚀")); // true
🧪 Lab 18: 匯率顯示器
請建立一個函數,輸入數字後,根據用戶傳入的區域 (Locale),
自動顯示當地格式的**相對時間**(例如輸入
-5, 'minute' 回傳 "5 分鐘前")。