首页 教程 Web前端 如何在JavaScript中将字符串转成UTF-8格式

如何在JavaScript中将字符串转成UTF-8格式

在日常的开发中,我们经常需要将字符串转化成 UTF-8 格式,因为 UTF-8 是一种通用的字符编码方式,它支持多语言字符,包括中文、日文、韩文等等。JavaScript 是一门常用的脚本语言,它可以帮助我们实现这个转换过程。

本文将会从以下几个方面介绍如何在 JavaScript 中将字符串转成 UTF-8 格式:

了解 UTF-8 编码方式

快速实现字符串转 UTF-8

完整的 UTF-8 转码方案

了解 UTF-8 编码方式

UTF-8 是一种变长字符编码,它的编码规则如下:

对于单字节的字符,字节的第一位设为 0,后面 7 位为这个字符的 Unicode 码;

对于多字节的字符,首字节的前 n 位全为 1,第 n+1 位为 0,后面字节的前 2 位一律设为 10,剩余的 6 位为该字符的 Unicode 码。

例如,中文字符 "你" 的 Unicode 码为 "U+4F60",根据上述规则,将其转成 UTF-8 编码后应该是 "E4 BD A0"。

快速实现字符串转 UTF-8

在 JavaScript 中,我们可以通过编码和解码函数方便地实现字符串转 UTF-8 格式的功能。

首先是编码函数,我们可以使用 encodeURIComponent() 函数把字符串转为 URI 编码格式,再将每个字符的 URI 编码按照 UTF-8 格式拼接成最终的字符串,示例代码如下:

function utf8Encode(str) {   let encodedStr = encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {     return String.fromCharCode(parseInt(p1, 16));   });     let utf8Str = "";   for (let i = 0; i < encodedStr.length; i++) {     let charCode = encodedStr.charCodeAt(i);     if (charCode < 128) {       utf8Str += String.fromCharCode(charCode);     } else if (charCode < 2048) {       utf8Str += String.fromCharCode((charCode >> 6) | 192);       utf8Str += String.fromCharCode((charCode & 63) | 128);     } else {       utf8Str += String.fromCharCode((charCode >> 12) | 224);       utf8Str += String.fromCharCode(((charCode >> 6) & 63) | 128);       utf8Str += String.fromCharCode((charCode & 63) | 128);     }   }     return utf8Str; }

其中, encodeURIComponent() 函数用于把字符串转化成 URI 编码,replace() 函数则用于将每个字符的 URI 编码按照 UTF-8 格式拼接成最终的字符串。

解码函数则是使用 decodeURIComponent() 函数对经过编码的字符串进行解码,示例代码如下:

function utf8Decode(utf8Str) {   let decodedStr = "";   let i = 0;     while (i < utf8Str.length) {     let charCode = utf8Str.charCodeAt(i);     if (charCode < 128) {       decodedStr += String.fromCharCode(charCode);       i++;     } else if (charCode >= 192 && charCode < 224) {       decodedStr += String.fromCharCode(((charCode & 31) << 6) | (utf8Str.charCodeAt(i + 1) & 63));       i += 2;     } else {       decodedStr += String.fromCharCode(((charCode & 15) << 12) | ((utf8Str.charCodeAt(i + 1) & 63) << 6) | (utf8Str.charCodeAt(i + 2) & 63));       i += 3;     }   }     return decodeURIComponent(decodedStr); }

完整的 UTF-8 转码方案

上述的函数虽然能够实现字符串转 UTF-8 格式,但是如果我们需要对整个 Web 应用中的字符串进行转码,这种方法就不太实用了。这时候我们可以借助第三方库,比如 iconv-lite,来完成整个应用的转码任务,示例代码如下:

const iconv = require("iconv-lite");   let utf8Str = "欢迎使用 iconv-lite 库";   let buf = iconv.encode(utf8Str, "utf8"); // 转成 UTF-8 Buffer let gbkStr = iconv.decode(buf, "gbk"); // 转成 GBK 编码字符串

在上述代码中,我们使用 iconv.encode() 函数将字符串转成 UTF-8 编码的 Buffer,再使用 iconv.decode() 函数将 Buffer 转成对应编码的字符串。需要注意的是,使用 iconv-lite 库需要先通过 npm 安装,安装方式为:

npm install iconv-lite

总结

本文介绍了如何在 JavaScript 中将字符串转换成 UTF-8 格式。我们了解了 UTF-8 编码方式,通过编码和解码函数实现了字符串转 UTF-8 的简单方法,并介绍了使用 iconv-lite 库完成整个应用的转码任务。在实际开发中,根据实际需求选择适合的方法可以减少开发成本,提高工作效率。

评论(0)条

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢
    【MySQL】用户管理

    【MySQL】用户管理

     服务器/数据库  2个月前  2.04k

    我们推荐使用普通用户对数据的访问。而root作为管理员可以对普通用户对应的权限进行设置和管理。如给张三和李四这样的普通用户权限设定后。就只能操作给你权限的库了。

    Cursor Rules 让开发效率变成10倍速

    Cursor Rules 让开发效率变成10倍速

     服务器/数据库  2个月前  1.12k

    在AI与编程的交汇点上,awesome-cursorrules项目犹如一座灯塔,指引着开发者们驶向更高效、更智能的编程未来。无论你是经验丰富的老手,还是刚入行的新人,这个项目都能为你的编程之旅增添一抹亮色。这些规则文件就像是你私人定制的AI助手,能够根据你的项目需求和个人偏好,精确地调教AI的行为。突然间,你会发现AI不仅能理解Next.js的最佳实践,还能自动应用TypeScript的类型检查,甚至主动提供Tailwind CSS的类名建议。探索新的应用场景,推动AI辅助编程的边界。

    探索Django 5: 从零开始,打造你的第一个Web应用

    探索Django 5: 从零开始,打造你的第一个Web应用

     服务器/数据库  2个月前  1.05k

    Django 是一个开放源代码的 Web 应用程序框架,由 Python 写成。它遵循 MVT(Model-View-Template)的设计模式,旨在帮助开发者高效地构建复杂且功能丰富的 Web 应用程序。随着每个版本的升级,Django 不断演变,提供更多功能和改进,让开发变得更加便捷。《Django 5 Web应用开发实战》集Django架站基础、项目实践、开发经验于一体,是一本从零基础到精通Django Web企业级开发技术的实战指南《Django 5 Web应用开发实战》内容以。

    MySQL 的mysql_secure_installation安全脚本执行过程介绍

    MySQL 的mysql_secure_installation安全脚本执行过程介绍

     服务器/数据库  2个月前  1k

    mysql_secure_installation 是 MySQL 提供的一个安全脚本,用于提高数据库服务器的安全性

    【MySQL基础篇】概述及SQL指令:DDL及DML

    【MySQL基础篇】概述及SQL指令:DDL及DML

     服务器/数据库  2个月前  447

    数据库是长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。数据库不仅仅是数据的简单堆积,而是遵循一定的规则和模式进行组织和管理的。数据库中的数据可以包括文本、数字、图像、音频等各种类型的信息。

    Redis中的哨兵(Sentinel)

    Redis中的哨兵(Sentinel)

     服务器/数据库  2个月前  293

    ​ 上篇文章我们讲述了Redis中的主从复制(Redis分布式系统中的主从复制-CSDN博客),本篇文章针对主从复制中的问题引出Redis中的哨兵,希望本篇文章会对你有所帮助。