143 lines
5.8 KiB
HTML
143 lines
5.8 KiB
HTML
---
|
||
title: \uxxxx 转中文，unicode 解码
|
||
layout: default_tool
|
||
keywords: [\uxxxx 转中文, unicode 解码]
|
||
description: 在线 unicode 解码。 \uxxxx 转中文。\uxxxx 实质是什么 ？为什么会有 \uxxxx 转中文的需求？
|
||
---
|
||
<div id="content">
|
||
|
||
<style type="text/css">
|
||
@media (min-width: 960px) {
|
||
.fl-box {
|
||
width: 50%;
|
||
padding-left: 5px;
|
||
}
|
||
}
|
||
@media (max-width: 960px) {
|
||
.fl-box {
|
||
width: 100%;
|
||
padding-left:0;
|
||
padding-right:5px;
|
||
}
|
||
}
|
||
</style>
|
||
<script>
|
||
if (typeof localStorage.unicode_activeTab == "undefined") {
|
||
localStorage.unicode_activeTab = 0
|
||
}
|
||
</script>
|
||
|
||
<div class="uk-width-10-10 uk-height-1-1" style="padding-bottom: 50px;">
|
||
<!-- 选项卡 -->
|
||
<div class="uk-width-10-10" style="margin-bottom: 10px;">
|
||
<ul class="uk-tab uk-tab-top" data-uk-tab="{connect:'#main', active:localStorage.unicode_activeTab, animation:'fade'}">
|
||
<li><a id="activeTab0" onClick="localStorage.unicode_activeTab = 0" rel="nofollow" href="#">解码</a></li>
|
||
<li><a id="activeTab1" onClick="localStorage.unicode_activeTab = 1" rel="nofollow" href="#">介绍</a></li>
|
||
<li><a id="alipay-red-bao-button" onmouseover="viewAlipayRedBao()" rel="nofollow">支付宝 扫码领红包</a></li>
|
||
</ul>
|
||
</div>
|
||
<script>
|
||
if (localStorage.alipayRedBaoNeedShow != '0') {
|
||
$('#alipay-red-bao-button').show()
|
||
if (new Date().setHours(0,0,0,0) < localStorage.alipayRedBaoViewTime
|
||
&& localStorage.alipayRedBaoViewTime < new Date().setHours(23,59,59,0)) {
|
||
$('#alipay-red-bao-button').removeClass('red-point-button')
|
||
} else {
|
||
$('#alipay-red-bao-button').addClass('red-point-button')
|
||
}
|
||
}
|
||
function viewAlipayRedBao () {
|
||
localStorage.alipayRedBaoViewTime = new Date().getTime()
|
||
$('#alipay-red-bao-button').removeClass('red-point-button')
|
||
}
|
||
</script>
|
||
|
||
<!-- 表单、结果 -->
|
||
<div class="uk-width-10-10 uk-height-1-1">
|
||
<ul id="main" class="uk-switcher uk-height-1-1">
|
||
<!-- 解码 -->
|
||
<li class="uk-height-1-1">
|
||
<div id="decode" class="uk-grid uk-height-1-1">
|
||
<div class="uk-width-1-2 fl-box uk-height-1-1" style="padding-left:0;padding-right:5px;">
|
||
<textarea class="uk-width-1-1 uk-height-1-1" style="resize:vertical;" placeholder="unicode 编码。/uxxxx 形式的字符串" spellcheck="false" v-model="origin" v-on:input="onChangeOrigin" autofocus></textarea>
|
||
</div>
|
||
<div class="uk-width-1-2 fl-box uk-height-1-1">
|
||
<textarea class="uk-width-1-1 uk-height-1-1" style="resize:vertical;" placeholder="中文" spellcheck="false" v-model="chinese" v-on:input="onChangeChinese"></textarea>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<!-- 介绍 -->
|
||
<li class="uk-height-1-1">
|
||
<div>
|
||
<h2>什么是 \uxxxx ？</h2>
|
||
\uxxxx 转中文，实际上 unicode 编码转中文。我们经常使用的字符编码主要有两种。一种是 utf8，另一种就是 unicode。<br><br>
|
||
utf8 编码一般被用在我们直接编辑的文本，也就是在文本编辑器中所见所得的字符的编码。特点是占用存储空间相对小。<br><br>
|
||
unicode 编码常常作为程序运行过程中，内存中表示字符所使用的编码，特点是每个字符所占用的长度相同。<br><br>
|
||
以上两种编码应该作为一种默认的使用规范。可以完美的避免各种乱码问题。
|
||
|
||
<h2>为什么会有 \uxxxx 转中文的需求？</h2>
|
||
因为内存中的字符串，直接对应于我们代码中的一个字符串变量。如果程序规范，它会以 unicode 编码的形式存储在内存中。然后我们直接打印这个字符串变量，经常就出现了 \uxxxx 的所谓乱码。实际是打印的操作不够规范。<br><br>
|
||
可以这样说服自己，我们统一把给人看的字符串用 utf8 表示，给机器看的字符串用 unicode 表示。打印的目的是要给人看，所以多加一句代码把字符串变量由 unicode 转成 utf8 再输出是合理的。
|
||
|
||
</div>
|
||
</li>
|
||
<li class="uk-height-1-1 uk-width-1-1 uk-text-center">
|
||
<img style="width:240px;" src="//cdn.apihub.net/img/alipay-red-bao.jpeg" alt="alipay 红包码">
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function unicode2Chinese(str){
|
||
let re = str.match(/\\u[0-9a-fA-F]{4}/g);
|
||
if(re == null) {
|
||
return str
|
||
}
|
||
for(let i = 0; i < re.length; i++){
|
||
str = str.replace(re[i], unescape(re[i].replace("\\u","%u")))
|
||
}
|
||
return str
|
||
}
|
||
function chinese2Unicode(str){
|
||
let ascii = ""
|
||
for (let i = 0; i < str.length; i++) {
|
||
var code = Number(str[i].charCodeAt(0));
|
||
if (code > 127) {
|
||
var charAscii = code.toString(16);
|
||
charAscii = new String("0000").substring(charAscii.length, 4) + charAscii
|
||
ascii += "\\u" + charAscii
|
||
} else {
|
||
ascii += str[i]
|
||
}
|
||
}
|
||
return ascii
|
||
}
|
||
</script>
|
||
<script>
|
||
var vm_unicode = new Vue({
|
||
el: "#decode",
|
||
data: {
|
||
origin: '',
|
||
chinese: '中文'
|
||
},
|
||
mounted: function () {
|
||
if (localStorage.unicode_tab0_chinese) {
|
||
this.chinese = localStorage.unicode_tab0_chinese
|
||
}
|
||
this.onChangeChinese()
|
||
},
|
||
methods: {
|
||
onChangeOrigin: function() {
|
||
this.chinese = unicode2Chinese(this.origin)
|
||
localStorage.unicode_tab0_chinese = this.chinese
|
||
},
|
||
onChangeChinese: function() {
|
||
localStorage.unicode_tab0_chinese = this.chinese
|
||
this.origin = chinese2Unicode(this.chinese)
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
</div> |