如何不依赖外部库从JS文件中正确显示🫀 emoji？

我有一个名为t.js的文件，内容如下：

s='🫀';

在index.html中引入该文件并输出变量s，index.html内容为：

<script src='t.js'></script>
<body>
<script>
document.write(s);
</script>  

但页面输出乱码“🫀”。我尝试使用btoa(unescape(encodeURIComponent('🫀')));处理，但问题依旧。请问是否有办法不借助js-base64这类外部包/库，实现从文件中正确显示🫀？

解决方法 #

乱码核心原因是文件编码不统一，浏览器解析JS文件时使用了错误的编码格式，导致emoji这类Unicode字符被错误解析。不用外部库的话，按以下步骤处理即可：

• 统一文件编码为UTF-8
  用编辑器（如VS Code、Notepad++）打开t.js和index.html，将文件编码设置为UTF-8后重新保存。注意避免用GBK等其他编码保存，否则字符会被转码。

• 在HTML中明确声明编码并指定JS文件编码
  在HTML的<head>中添加编码声明，同时给引入JS的<script>标签加上charset属性指定编码，强制浏览器用UTF-8解析：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<script src='t.js' charset="UTF-8"></script>
<script>
document.write(s);
</script>  
</body>
</html>

• 用Unicode转义序列替代原字符（兼容方案）
  如果无法修改文件编码，可将t.js中的emoji替换为对应的Unicode转义码，浏览器能直接解析该格式：

// ES6+支持的Unicode码点形式
s='\u{1FA80}';
// 兼容旧环境的UTF-16代理对形式
s='\ud83e\ude80';

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