如何将特殊符号转化成字符编码！
有时候使⽤⼀些⼩图标的时候，通常情况下，都是⽤的雪碧图将他们放在⼀起，然后通过背景调⽤，但是很多图标都是很简单的字符图标，却往往多增加了⼀些请求，⼤⼩也增加了（图⽚肯定⽐字符要⼤）；为什么就不能将这些简单的字符图标⽤字符编码的形式来体现呢？这样性能不是更好吗？⾄少是⼀个⽹站优化的⽅向啊！所以我说⼲就⼲，在⽹上吧！照理说我这想法应该很多⼈都想到了啊，但是⽹上却很难到把⼀些常⽤的字符图标转化为字符编码的⽂章或者是例⼦，然道是太简单了？还是说⼤神都不屑于做这样的事情！好吧，这叫我们这些菜鸟怎么办呢！
⾝为菜鸟，我要为菜鸟带盐！其实很多菜鸟都想知道怎么去弄，可能也有很多⼈不会或者是不懂，所以我觉得这篇⽂章应该会对⼤部分初学者或者是想要⽤但是不会弄的⼈有帮助吧！
好了，下⾯就进⼊正题：
其实这个的原理还是蛮简单的，就是将⼀些字符图标转换为字符编码！那如何转化呢？
那就要⽤到javascript的charCodeAt()⽅法了，它的作⽤是可以返回指定位置的字符的 Unicode 编码，什么？你不懂？不懂没关系，我慢慢教你！
举个例⼦：
我想知道alt对于的a的字符编码，怎么办？
var uAlt = 'alt';
alert(uAlt.charCodeAt(0));
咱们来输出⼀下：97；也就是说alt中的a对应的字符编码就是97。可是我要得到的不是字符串的字符编码啊，好吧，你还听⼼急的，那我们就做⼀个简单的字符图标看看，⽐如说我要使⽤▼（⼀般情况下你在⽹页上还很难到这图标，除⾮是在那个word等软件上⾯扣⼀个出来放上去，⿇烦）：
var uIcon = '▼';
alert(uIcon.charCodeAt(0));
咱们再输出⼀下：9660；这就是这个图标的⼗进制编码了，为什么charCodeAt(0)的括号⾥⾯是0呢？咳咳，这⾥你⾃⼰查⼀下⼿册吧！
字符串转数组编码方式那现在是⼗进制的，很多时候我们都是使⽤的⼗六进制的，那怎么办呢？⾼⼿肯定知道怎么做啦，那我就为初学者写个⽰范吧：
var uIcon = '▼';
var uCode10 = uIcon.charCodeAt(0);
var uCode16 = String(16);
alert(uCode16 );
输出的结果是：25bc;
那这2个例⼦⼀写，很多⼈基本上都知道怎么弄了；但是每次要⽤的时候不可能每次都把它运⾏⼀遍再得到吧，好⿇烦啊！
下⾯我写了⼀个⼩例⼦，⽤数组的⽅式将他们放在⼀起，然后在输出⼀个表格，⼗进制，⼗六进制都在上⾯，⾃⼰存⼀下，要⽤的时候直接复制就可以了，哈塞，好激动啊！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>转译字符器</title>
<script>
function charEncode(){
var array = ['▲','▼','△','▽','◣','◤','◢','◥','■','□','★','☆','●','○','◆','◇','▁','▂','▃','▄','▅','▆','▇','█','▉','▊','▋','▌','▍','▎','▏','※','→','←','↑','↓',
'↖','↗','↘','↙','♠','♥','♣','♦','►','◄','▶','◀','▷','◁','◆','☺','☻','✖','✕','✔','✓','✿','❀','❁','❃','❂',
'♞','♩','♪','♫','♬','♨','☼','☎','☏','☢','◕','◐','◑','◎','⊙','♀','♂','¤','▧','▣','▤','▥','▦','▩','☀','☂'];
var length = array.length;
document.writeln("<div class=\"box\">");
document.writeln("<ul id=\"encode-list\">");
document.writeln("<li><span>图形</span><span>⼗进制编码</span><span>⼗六进制</span></li>");
for(var i=0; i<length; i++){
var val = array[i];
var ucode10 = val.charCodeAt(0);
var ucode16 = val.charCodeAt(0).toString(16);
document.writeln("<li><span>" + val + "</span>" + "<span>&#" + ucode10 + ";</span>" + "<span>&#x" + ucode16 + ";</span></li>");
}
document.writeln("<div style='clear:both;'>");
document.writeln("</ul>");
document.writeln("</div>");
var uIcon = '▼';
var uCode10 = uIcon.charCodeAt(0);
var uCode16 = String(16);
alert(uCode16 );
}
</script>
<style>
*{ padding:0; margin:0;}
ul{ padding:0; margin:0; list-style:none;}
.box{ width:300px; border:1px solid #ccc; margin:20px auto 0; border-bottom:none; border-right:none;}
#encode-list li{ width:300px; height:30px; line-height:30px; border-bottom:1px solid #ccc;}
#encode-list li span{ width:99px; display:inline-block; text-align:center; border-right:1px solid #ccc;}
</style>
</head>
<body>
</body>
</html>
数组⾥⾯放的都是⼀些常⽤的字符图标，可能⼀些你⽤不到，或者说有些不在⾥⾯，没关系，将代码复制下来，然后在数组⾥⾯加，就直接显⽰出来了！注意哈：Unicode 编码前⾯必须加上前缀才能被解析成图标，别忘了！
雕⾍⼩技只为初学者学习，⼤神飘过！谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。