百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

前端中JS的字符编码及常用操作字符API

myzbx 2024-12-13 15:05 69 浏览

JavaScript 中,Unicode 编码方式用于表示字符,包括中文字符。Unicode 是一个标准的字符编码系统,为世界上几乎所有的字符都定义了唯一的编号,以便在计算机中进行交换和处理。本文将着重讨论 JavaScript 中的字符编码。关于其前端数据流的一些编码工作可以移步这里: JS处理文件数据的API

字符集简介(Unicode)

Unicode 是一个字符编码标准,定义了世界上几乎所有字符的唯一编号,使得在计算机中交换和处理文本变得更加统一和可靠。Unicode 字符集包含了数十万个字符,覆盖了几乎所有的书写系统、符号、标点符号、表情符号等。以下是 Unicode 字符集的详细内容:

  • 基本多文种平面(Basic Multilingual Plane,BMP): 这是Unicode字符集中最常用和最广泛使用的部分,包含了U+0000至U+FFFF的字符范围,共计65536个字符。其中包括了:
  • 基本拉丁字母(Basic Latin):包含英文字母、数字、标点符号等,U+0000至U+007F。
  • 拉丁字母补充-1(Latin-1 Supplement):包含一些欧洲语言特有的字符,U+0080至U+00FF。
  • 拉丁字母扩展-A、B、C、D(Latin Extended-A、B、C、D):包含更多欧洲语言的字符,U+0100至U+024F。
  • 基本希腊字母(Greek and Coptic):包含希腊字母,U+0370至U+03FF。
  • 基本西里尔字母(Cyrillic):包含西里尔字母,U+0400至U+04FF。
  • 基本汉字(CJK Unified Ideographs):包含最常用的汉字,U+4E00至U+9FFF。
  • 以及其他语言的字符,如希伯来文、阿拉伯文、泰文、韩文、日文假名等。
  • 辅助平面(Supplementary Planes): 除了基本多文种平面之外,Unicode还定义了16个辅助平面,分别从U+010000至U+10FFFF,每个辅助平面包含65536个字符,共计1,114,112个字符。辅助平面中包含了更多不常用的字符,特殊符号、历史上的书写系统、emoji表情符号等。
  • 保留区域(Private Use Area): Unicode还保留了一部分区域,供个人或组织自行定义字符。这些字符不在Unicode官方标准中定义,只在特定的上下文中有意义。
  • 非字符代码点(Noncharacter Code Points): Unicode还定义了一些非字符代码点,这些代码点没有对应的字符表示,用于特殊目的,如表示无效的编码或保留未来使用。

注: JavaScript 中的使用的 Unicode 编码方式主要有两种:UTF-16UTF-8

UTF-16

UTF-16(16-bit Unicode Transformation Format)是JavaScript中使用的主要字符编码方式。在UTF-16中,每个字符由一个或两个16位的代码单元(code unit)表示。对于 ASCII 字符和大部分常用字符,UTF-16使用一个16位的代码单元表示;对于一些较少使用的字符(如一些特殊的中文字符),UTF-16使用两个16位的代码单元表示,合称为“代理对”(surrogate pair)。UTF-16 代理对的范围为:从 U+D800U+DFFF。注意,这个范围是不可用的(reserved),并且不能用于表示 Unicode 字符,因此UTF-16的可用编码范围是从 U+0000U+D7FF 和从 U+E000U+10FFFF。这样留出了一个区间用于表示代理对。

注意:无法打印显示不代表不表示字符,如 U+E000 - U+FFFFUnicode编码中属于字形图形(Private Use Area)范围,有一些字符可以在浏览器中打印出来,但需要注意的是这些字符的显示效果可能会因浏览器、操作系统和字体的差异而有所不同。这些字符没有统一的含义,通常用于特定的定制和私有应用场景

UTF-16代理对编码规则如下:

  • 高位代理(High Surrogate):U+D800U+DBFF,共1024个代码点。 高位代理的二进制范围为:1101 10xx xxxx xxxx
  • 低位代理(Low Surrogate):U+DC00U+DFFF,共1024个代码点。 低位代理的二进制范围为:1101 11xx xxxx xxxx

JavaScript中,可以使用 \u 转义序列来表示UTF-16编码的字符,后跟四个十六进制数字。例如,中文字符 “你” 对应的UTF-16编码是U+4F60,可以用 \u4F60 来表示。

js// 单个16位代码单元表示的字符
const chineseCharacter = '\u4F60'; // 表示中文字符"你"
console.log(chineseCharacter); // 输出:你

// 双个16位代码单元表示的字符(使用高低代理对表示)
const chineseCharacter = '\ud841\udf0e''; // 表示中文字符""
console.log(chineseCharacter); // 输出:

UTF-8

UTF-8(8-bit Unicode Transformation Format)是一种变长的编码方式,它可以用一个或多个8位字节(byte)来表示一个字符。UTF-8编码的主要特点是使用1到4个字节来表示不同范围的Unicode字符,使得它能够适应不同类型的文本,并且兼容ASCII字符。对于一般的中文字符,多数是使用3个字节来表示。

UTF-8编码规则如下:

单字节编码:

  • 对于ASCII字符(U+0000U+007F),UTF-8使用单个字节来表示,字节的最高位为0,其余7位表示ASCII字符的编码。

多字节编码: 对于非ASCII字符(U+0080及以上的字符),UTF-8使用多个字节表示。多字节的编码规则如下:

  • 2字节编码:第一个字节的前两位为“110”,第二个字节的前两位为“10”,剩下的5+6位用来存储Unicode字符的编码。
  • 3字节编码:第一个字节的前三位为“1110”,第二、第三个字节的前两位为“10”,剩下的4+6+6位用来存储Unicode字符的编码。
  • 4字节编码:第一个字节的前四位为“11110”,第二、第三、第四个字节的前两位为“10”,剩下的3+6+6+6位用来存储Unicode字符的编码。

字符编码常用的API

1. String.fromCharCode

根据给定码点,查找相对应的字符,注意:该Api只支持 16 位 Unicode 码点,也即是到0 ~ 65535 范围的字符,可能无法正确处理某些特殊字符。

jsString.fromCharCode('65532')   //  '?'
String.fromCharCode('2312')   // '?'

String.fromCharCode(21029234827265) // '态'   超出范围时 会保留后两个字节的数据
// 21029234827265 二进制表示为  100110010000001000000000100100110000000000001
// 后两个字节 为 '0110000000000001' 转成10进制为 24577
// 所以 String.fromCharCode(21029234827265) === String.fromCharCode(24577)  // '态' 

2. String.fromCodePoint

根据给定码点,查找相对应的字符,注意:该Api支持所有Unicode字符的范围。

jsString.fromCodePoint('132878') //    超过了 0xffff范围
String.fromCodePoint('24577')  // 态    没超过了 0xffff范围

下面三个 API 都是根据字符查找相关的码点位置,有所区别

3. String.prototype.charCodeAt

取指定索引处字符的 Unicode 码点值。 注意:该Api只支持 16 位 Unicode 码点,也即是到0 ~ 65535 范围的字符,并且取得字符位置的编码方式是以UTF-16格式获取,如下。

js // 没超过了 0xffff范围
String.prototype.charCodeAt.call('态',0)   // 24577  0x6001

// 超过了 0xffff范围
String.prototype.charCodeAt.call('',0)   // 55361  0xd841
String.prototype.charCodeAt.call('',1)   // 57102  0xdf0e

4. String.prototype.charAt

取指定索引处字符的 Unicode 码点值。 注意:该Api只能按照 16 位 去取值,只支持 16 位 Unicode 码点的一次性取值。

js// 超过了 0xffff范围
String.prototype.charAt.call('$%^&*',0)   // '\uD841'  与 String.prototype.charCodeAt.call('',0) 位置相同
String.prototype.charAt.call('$%^&*',1)   // ''\uDF0E'  与 String.prototype.charCodeAt.call('',1) 位置相同
// 没超过了 0xffff范围
String.prototype.charAt.call('$%^&*',2)   // '#39;

5. String.prototype.codePointAt

获取指定索引处的字符。 来处理更大范围的 Unicode 码点值,可以包含整个unicode编码的字符, 注意:该Api支持所有 Unicode 字符的范围。

jsString.prototype.codePointAt.call('') // 132878   超过了 0xffff范围
String.prototype.codePointAt.call('态')  // 24577    没超过了 0xffff范围

UniCode字符到UTF-16转换

由于需要在浏览器显示相关的Unicode字符,使用类似 '\u6001' 这种形式,我们需要对Unicode上的所有码点进行处理,方式有很多,这里使用较为简单的一种方式实现,如下:

jsfunction getCodePointByCharsToChar(chars){
    const res = [];
    for(let i =0; i<chars.length;i++ ){
        const high  =chars[i].charCodeAt(0).toString(16);
        if(chars[i]){
            if(chars[i].codePointAt()>0xffff){
                const low  =chars[i].charCodeAt(1).toString(16);
                res.push(
                    `\u${'0'.repeat(4-high.length)}${high}\u${'0'.repeat(4-low.length)}${low}`
                );
            }else{
                res.push(
                    `\u${'0'.repeat(4-high.length)}${high}`
                );
            }
        }
        
    }
    return res;
}
// 双字节字符表示
getCodePointByCharsToChar('今天是个好天气')  // ['\u4eca', '\u5929', '\u662f', '\u4e2a', '\u597d', '\u5929', '\u6c14']


// 多字节字符表示
getCodePointByCharsToChar('')  // ['\ud841', '\udf0e', '\ud841', '\udf0e', '\ud841', '\udf0e', '\ud841', '\udf0e', '\ud841', '\udf0e', '\ud841', '\udf0e']

总结: 关于前端中常常使用的字符集相关的API介绍已经结束,关于Javascript字符集的一些想法和问题,可以评论区留言。

相关推荐

如何设计一个优秀的电子商务产品详情页

加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...

怎么在JS中使用Ajax进行异步请求?

大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加...

中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革

前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...

前端监控 SDK 开发分享_前端监控系统 开源

一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的...

Ajax 会被 fetch 取代吗?Axios 怎么办?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch...

前端面试题《AJAX》_前端面试ajax考点汇总

1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...

Ajax 详细介绍_ajax

1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的...

6款可替代dreamweaver的工具_替代powerdesigner的工具

dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...

我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊

接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...

福斯《死侍》发布新剧照 &quot;小贱贱&quot;韦德被改造前造型曝光

时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预...

2021年超详细的java学习路线总结—纯干货分享

本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...

不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!

Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人...

2025 年 Python 爬虫四大前沿技术:从异步到 AI

作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易...

最贱超级英雄《死侍》来了!_死侍超燃

死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...

停止javascript的ajax请求,取消axios请求,取消reactfetch请求

一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求...