嘿，针对你关于TextDecoder/TextEncoder API的几个问题，我整理了实用的方案，帮你搞定浏览器兼容～

最靠谱的检测方法是直接特性检测，而不是通过浏览器UA（用户代理）判断——毕竟UA很容易伪装，而且浏览器版本迭代快，特性检测更准确。

你只需要检查全局作用域中是否存在TextDecoder和TextEncoder这两个构造函数就行：

function supportsTextEncoding() {
  return typeof window.TextDecoder !== 'undefined' && typeof window.TextEncoder !== 'undefined';
}

// 调用示例
if (supportsTextEncoding()) {
  // 浏览器支持，直接用原生API
  const encoder = new TextEncoder();
  const decoder = new TextDecoder();
  // 后续编码/解码操作...
} else {
  // 需要加载polyfill或者做降级处理
}

有几个成熟的polyfill可以完美替代原生API，其中最常用的是：

• text-encoding：完全遵循W3C标准实现，支持绝大多数编码格式，API和原生完全一致，轻量且稳定。
• encoding：功能更全面，除了TextEncoder/Decoder，还包含其他编码工具，但体积稍大。

通常推荐text-encoding，它足够覆盖大部分使用场景，而且和原生API的兼容性最好。

当然可以按需加载！这是最佳实践——只在不支持的浏览器中加载polyfill，避免给现代浏览器增加不必要的资源负担。

方式1：ES模块动态导入（推荐，适合现代项目） #

利用ES6的import()语法，在检测到不支持时才加载polyfill：

async function getTextEncodingAPIs() {
  // 先检查原生支持
  if (typeof TextDecoder !== 'undefined' && typeof TextEncoder !== 'undefined') {
    return { TextDecoder, TextEncoder };
  }
  // 不支持则加载polyfill
  const polyfill = await import('text-encoding');
  return {
    TextDecoder: polyfill.TextDecoder,
    TextEncoder: polyfill.TextEncoder
  };
}

// 使用示例
async function processData(rawData) {
  const { TextEncoder, TextDecoder } = await getTextEncodingAPIs();
  const encoded = new TextEncoder().encode('Hello World');
  const decoded = new TextDecoder().decode(rawData);
  // 处理数据...
}

方式2：动态创建Script标签（兼容旧浏览器） #

如果你的项目需要支持不支持ES模块的旧浏览器，可以用传统的动态script加载方式：

function loadTextEncodingPolyfill(callback) {
  const script = document.createElement('script');
  // 替换为你的polyfill文件路径
  script.src = 'path/to/text-encoding.min.js';
  script.onload = () => {
    // 加载完成后执行回调
    callback();
  };
  document.head.appendChild(script);
}

// 检测并加载
if (!supportsTextEncoding()) {
  loadTextEncodingPolyfill(() => {
    // 现在可以使用polyfill提供的API了
    const decoder = new TextDecoder('utf-8');
    // ...
  });
}

内容的提问来源于stack exchange，提问作者enesn