【ES2026】前端必学（下）：全球化与细节完善，打造更稳的应用

1
// 创建一个“美国英语”的Locale对象（周日起始，公历）
2
const usLocale = new Intl.Locale('en-US', {
3
  weekStartsOn: 0, // 周日起始（0=周日，1=周一，…，6=周六）
4
  calendar: 'gregory', // 公历
5
  numberingSystem: 'latn', // 拉丁数字（123）
6
})
7

8
// 创建一个“沙特阿拉伯语”的Locale对象（周六起始，伊斯兰历）
9
const saLocale = new Intl.Locale('ar-SA', {
10
  weekStartsOn: 6, // 周六起始
11
  calendar: 'islamic-umalqura', // 伊斯兰历（沙特官方使用）
12
  numberingSystem: 'arab', // 阿拉伯数字（١٢٣）
13
})

1
// 预定义各地区的Locale配置（可复用）
2
const locales = {
3
  'en-US': new Intl.Locale('en-US', { weekStartsOn: 0 }),
4
  'zh-CN': new Intl.Locale('zh-CN', { weekStartsOn: 1 }),
5
  'th-TH': new Intl.Locale('th-TH', { weekStartsOn: 1 }),
6
  'ar-SA': new Intl.Locale('ar-SA', {
7
    weekStartsOn: 6,
8
    calendar: 'islamic-umalqura',
9
    numberingSystem: 'arab',
10
  }),
11
}
12

13
// 通用日期格式化函数（基于Locale配置）
14
function formatDate(date: Date, localeKey: keyof typeof locales) {
15
  const locale = locales[localeKey]
16
  // 从Locale中提取配置，生成DateTimeFormat
17
  const formatter = new Intl.DateTimeFormat(locale, {
18
    year: 'numeric',
19
    month: '2-digit',
20
    day: '2-digit',
21
    weekday: 'long',
22
    // 自动继承Locale的calendar、numberingSystem、weekStartsOn
23
  })
24
  return formatter.format(date)
25
}
26

27
// 测试：美国用户的日期
28
console.log(formatDate(new Date('2025-10-06'), 'en-US'))
29
// 输出：Sunday, 10/06/2025（周日，MM/DD/YYYY）
30

31
// 测试：沙特用户的日期（伊斯兰历）
32
console.log(formatDate(new Date('2025-10-06'), 'ar-SA'))
33
// 输出：السبت، ١٤٤٧-٠٢-٢٥（周六，伊斯兰历1447年2月25日，阿拉伯数字）

1
// 用户切换到“印尼语（印尼）”
2
function switchLocale(localeKey: keyof typeof locales) {
3
  const locale = locales[localeKey]
4
  // 更新全局的日期格式化器
5
  window.globalDateFormatter = new Intl.DateTimeFormat(locale, {
6
    year: 'numeric',
7
    month: 'long',
8
    day: 'numeric',
9
  })
10
  // 更新所有日期显示
11
  document.querySelectorAll('.date').forEach((el) => {
12
    el.textContent = window.globalDateFormatter.format(
13
      new Date(el.dataset.date!)
14
    )
15
  })
16
}

1
{
2
  "orderId": 1234567890123456,
3
  "amount": 99.99,
4
  "status": "success"
5
}

1
const data = JSON.parse(response)
2
console.log(data.orderId) // 1234567890123456 → 正确？
3
// 等等，其实1234567890123456是16位，Number能精确表示吗？
4
// 答案是：能，但1234567890123457就会变成1234567890123456.999…
5
// 更危险的是，比如订单号是1234567890123459，JSON.parse后会变成1234567890123460。

1
// 后端返回的JSON字符串（含16位订单号）
2
const response = `{
3
  "orderId": 1234567890123456,
4
  "amount": 99.99,
5
  "status": "success"
6
}`
7

8
// 解析JSON，把16位以上的数字转成字符串
9
const data = JSON.parse(response, (key, value, context) => {
10
  if (key === 'orderId') {
11
    // 从context.source中提取原始字符串（"1234567890123456"）
12
    const original = context.source.split(':')[1].trim().replace(',', '')
13
    // 判断是否是16位以上的整数
14
    if (/^\d{16,}$/.test(original)) {
15
      return original // 保留为字符串
16
    }
17
  }
18
  return value
19
})
20

21
console.log(data.orderId) // "1234567890123456"（字符串，完全精确）
22
console.log(typeof data.orderId) // "string"

1
function bigNumberReviver(key: string, value: any, context: JSON.ParseContext) {
2
  // 只有数字类型才需要处理
3
  if (typeof value !== 'number') return value
4

5
  // 提取原始字符串
6
  const original = context.source.split(':')[1].trim().replace(',', '')
7

8
  // 判断是否是整数，且长度≥16位
9
  if (/^\d{16,}$/.test(original)) {
10
    return original
11
  }
12

13
  return value
14
}
15

16
// 使用：
17
const data = JSON.parse(response, bigNumberReviver)
18
console.log(data.orderId) // "1234567890123456"（字符串）

1
// 监听全局错误
2
window.addEventListener('error', (e) => {
3
  if (e.error instanceof Error) {
4
    reportError(e.error) // 上报错误
5
  } else {
6
    console.log('非Error对象，忽略')
7
  }
8
})

1
<iframe src="other-site.com"></iframe>

1
window.addEventListener('error', (e) => {
2
  if (Error.isError(e.error)) {
3
    reportError(e.error) // 正确上报
4
  }
5
})

1
// 跨iframe的错误对象
2
const iframe = document.createElement('iframe')
3
document.body.appendChild(iframe)
4
const iframeError = iframe.contentWindow.Error('iframe error')
5

6
console.log(iframeError instanceof Error) // false（传统方法失效）
7
console.log(Error.isError(iframeError)) // true（新方法有效）

1
/**
2
 * 验证并修复评论内容中的不合法Unicode
3
 * @param comment 用户输入的评论
4
 * @returns 修复后的合法评论
5
 */
6
function validateComment(comment: string) {
7
  // 检查是否包含不合法Unicode
8
  if (!comment.isWellFormed()) {
9
    // 用�替换无效字符（�是Unicode的“替换字符”，表示无效内容）
10
    const fixedComment = comment.toWellFormed()
11
    console.warn(
12
      `检测到不合法字符，已自动修复：原内容→${comment}，修复后→${fixedComment}`
13
    )
14
    return fixedComment
15
  }
16
  // 合法内容直接返回
17
  return comment
18
}
19

20
// 测试：处理截断的emoji（\uD83D是emoji的前半部分，缺少后半部分）
21
const userComment = '我今天收到了一个礼物\uD83D'
22
const validComment = validateComment(userComment)
23

24
console.log(validComment) // 输出：我今天收到了一个礼物�（�替换了无效的\uD83D）
25
console.log(JSON.stringify(validComment)) // 输出："我今天收到了一个礼物�"（不会报错）