unicode字符的不同表示法

unicode字符在html、css和js中的表示方法均不相同,下面分别作介绍。

原文发表于这里

css表示法

首先来一段很常见的bootstrap的字体图标代码:

.glyphicon-home:before {
content: "\e021";
}

上面代码中的e021就是这个字符的unicode码,是16进制。

语法:

'\ + 16进制的unicode编码'

如:'\5b89'表示汉字“安”:

<div class="test"></div>
<style>
.test: before {content: "\e021";}
</style>

js表示方法

语法:

'\u + 16进制的unicode编码'

示例:

// 如:'\u5b89'表示汉字“安”
console.log('\u5b89'); // 输出“安”

html表示方法

html特殊一点,使用的是10进制,一开始没注意这个搞的半天出不来郁闷很久。

语法:

'&# + 10进制的unicode编码 + 英文分号;'

& #23433;(注意,由于正常书写的话发表之后会被转换成汉字,所以我这里故意中间留了空格防止转换)表示汉字,结尾的分号经测试不加也没问题,但是最好还是加一下。

<div>
这是unicode表示的字符“安”:& #23433;(这里故意留一空格防止转换)
</div>

另外,一些特殊字符还有其它表示,也就是常说的html转义字符,如(由于自动转换问题,这里用图片表示):

完整的HTML转义字符表可以参见这里:

http://tool.oschina.net/commons?type=2

获取汉字的unicode编码

那么,如何知道一个汉字的unicode的编码呢?很简单:

'安'.charCodeAt(); // 输出的 23433 就是汉字 安 的unicode编码,不过注意是10进制的
String.fromCharCode(23433); // 输出 '安'

得到了10进制的unicode编码,再如果想在js和css里面用的话,就需要用toString(16)转16进制再做进一步处理了。

var unicode = '\\u'+'茗'.charCodeAt().toString(16); // 输出字符串:"\u8317"
JSON.parse('"'+unicode+'"'); // 输出汉字:"茗"
eval('"'+unicode+'"'); // 或者使用eval解析也可以

HTML、CSS、JS对unicode字符的不同处理的更多相关文章

  1. js中 字符串与Unicode 字符值序列的相互转换

    一. 字符串转Unicode 字符值序列 var str = "abcdef"; var codeArr = []; for(var i=0;i<str.length;i++ ...

  2. Unicode Character Table – Unicode 字符大全

    Unicode(统一码.万国码.单一码)是一种在计算机上使用的字符编码.它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言.跨平台进行文本转换.处理的要求.Unicode Chara ...

  3. HTML/CSS/JS编码规范

    最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...

  4. HTML+CSS+JS总结

    ==================HTML(超文本标记语言)========== <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告 ...

  5. C# 封装miniblink 使用HTML/CSS/JS来构建.Net 应用程序界面和简易浏览器

    MiniBlink的作者是 龙泉寺扫地僧 miniblink是什么?   (抄了一下 龙泉寺扫地僧 写的简洁) Miniblink是一个全新的.追求极致小巧的浏览器内核项目,其基于chromium最新 ...

  6. HTML---引入css,js | 常用标签示例

    一.前端基础包括哪些?如何理解 二.css,js引入_及head中其他标签 三.特殊符号 四.常见的标签 4.1,form表单 4.2,input系列(单选框.复选框.input传文件.重置) 4.3 ...

  7. 使用Unicode字符实现换行

    要让inline元素换行可以使用Unicode字符实现: <!DOCTYPE html> <html lang="en"> <head> < ...

  8. maven-replacer-plugin 静态资源版本号解决方案(css/js等)

    本文介绍如何使用 maven 的 com.google.code.maven-replacer-plugin 插件来自动添加版本号,防止浏览器缓存. 目录 1.解决方案 2.原始文件和最终生成效果 3 ...

  9. js实现unicode码字符串与utf8字节数据互转

    js的string变量存储字符串使用的是unicode编码,要保存时必须选择其他编码后进行传输,比如转成utf-8,utf-32等.存储到数据库中为utf-8编码,读取出来如何转换成正确的字符串就成了 ...

随机推荐

  1. KeyedPriorityQueue

    // <copyright file="KeyedPriorityQueue.cs" company="Microsoft">Copyright ( ...

  2. MyEclipse创建Maven工程

    先要在MyEclipse中对Maven进行设置:

  3. 一台电脑安装多个版本的jdk

    我们平时在做Java开发的时候,有时需要使用多个版本的jdk, 那么一台电脑上需要安装多个JDK了. 那一台电脑上可不可以同时安装多个版本的jdk呢? 答案是可以的! 但使用的时候,只能使用一个,不能 ...

  4. R内存管理与垃圾清理

    1.内存查看 memory.limit():查看内存大小 memory.limit(n):申请内存大小 memory.size(NA):查看内存大小 memory.size(T):查看已分配的内存 m ...

  5. css3控制标题字数超出的部分自动显示为“...”省略号

    css3功能强大,可以让超出指定宽度的部分自动显示为"..." 代码如下 display:block;text-overflow:ellipsis;white-space:nowr ...

  6. Unity Android加密DLL笔记

    unity mono 地址:https://github.com/Unity-Technologies/mono 下载与unity版本对应的unity mono. brew安装:http://brew ...

  7. grep 信息提取

    1.提取svn版本库的版本号 svn info |grep -Po '(?<=Revision: )[0-9]*'

  8. ACCEPTANCE CRITERIA FOR USER STORIES

    One of the teams I have recently coached quickly got a grasp of how to phrase user stories but found ...

  9. Winform控件WebBrowser与JS脚本交互

    1)在c#中调用js函数 如果要传值,则可以定义object[]数组. 具体方法如下例子: 首先在js中定义被c#调用的方法: function Messageaa(message) {       ...

  10. python 函数之装饰器,迭代器,生成器

    装饰器 了解一点:写代码要遵循开发封闭原则,虽然这个原则是面向对象开发,但也适用于函数式编程,简单的来说,就是已经实现的功能代码不允许被修改但 可以被扩展即: 封闭:已实现功能的代码块 开发:对扩张开 ...