目录

  • 一、 Unicode简介
  • 二、 编码方式
  • 三、 代码实现


一、 Unicode简介

统一码(Unicode),也叫万国码、单一码,是计算机科学领域里的一项业界标准,包括字符集、编码方案等。Unicode是为了解决传统的字符编码方案的局限而产生的,它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言、跨平台进行文本转换、处理的要求。
在这种语言环境下,不会再有语言的编码冲突,在同屏下,可以显示任何语言的内容,这就是Unicode的最大好处。就是将世界上所有的文字用2个字节统一进行编码。那样,像这样统一编码,2个字节就已经足够容纳世界上所有的语言的大部分文字了。
Unicode 当然是一本很厚的字典,记录着世界上所有字符对应的一个数字。具体是怎样的对应关系,又或者说是如何进行划分的,就不是我们考虑的问题了,我们只用知道 Unicode 给所有的字符指定了一个数字用来表示该字符。

对于 Unicode 有一些误解,它仅仅只是一个字符集,规定了符合对应的二进制代码,至于这个二进制代码如何存储则没有任何规定。它的想法很简单,就是为每个字符规定一个用来表示该字符的数字,仅此而已。

二、 编码方式

Unicode是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案。Unicode用数字0-0x10FFFF来映射这些字符,最多可以容纳1114112个字符,或者说有1114112个码位。码位就是可以分配给字符的数字。UTF-8、UTF-16、UTF-32都是将数字转换到程序数据的编码方案。
Unicode字符集可以简写为UCS(Unicode Character Set)。早期的Unicode标准有UCS-2、UCS-4的说法。UCS-2用两个字节编码,UCS-4用4个字节编码。UCS-4根据最高位为0的最高字节分成2^7=128个group。每个group再根据次高字节分为256个平面(plane)。每个平面根据第3个字节分为256行(row),每行有256个码位(cell)。group 0的平面0被称作BMP(Basic Multilingual Plane)。将UCS-4的BMP去掉前面的两个零字节就得到了UCS-2。

Unicode对中文的编码:
在Unicode 5.0.0版本中,238605-65534*2-6400-2408=99089。余下的99089个已定义码位分布在平面0、平面1、平面2和平面14上,它们对应着Unicode定义的99089个字符,其中包括71226个汉字。平面0、平面1、平面2和平面14上分别定义了52080、3419、43253和337个字符。平面2的43253个字符都是汉字。平面0上定义了27973个汉字。

大多数计算机采用ASCII码(美国标准信息交换码),它是表示所有大小写字母、数字、标点符号和控制字符的7位编码方案。统一码(Unicode)包含ASCII码,‘\u0000’到’\u007F’对应全部128个ACSII字符。在JAVA中可以使用统一码。

三、 代码实现

Controller:

package com.sducsrp.csrp.controller.ToolsController;

import com.sducsrp.csrp.common.Constants;
import com.sducsrp.csrp.common.Result;
import org.springframework.web.bind.annotation.*;

@RestController
public class UnicodeController {
    @RequestMapping("/tools/Unicode/encode")
    public @ResponseBody
    Result encode(@RequestParam("data") String data)
    {
        if(data==null||"".equals(data))
        {
            return Result.error();
        }
        StringBuffer unicode=new StringBuffer();
        for(int i=0;i<data.length();i++)
        {
            char c= data.charAt(i);
            String hex = Integer.toHexString(c);
            if(hex.length()<=2)
            {
                hex="00"+hex;
            }
            unicode.append("\\u"+hex);
            System.out.print(unicode);
        }
        Result res=new Result(Constants.CODE_200,null,unicode.toString());
        return res;
    }

    @RequestMapping("/tools/Unicode/decode")
    public @ResponseBody
    Result decode(@RequestParam("data") String data)
    {
        if(data==null||"".equals(data))
        {
            return Result.error();
        }
        StringBuffer sb=new StringBuffer();
        int i=-1;
        int pos=0;
        while ((i = data.indexOf("\\u", pos)) != -1) {
            sb.append(data.substring(pos, i));
            if (i + 5 < data.length()) {
                pos = i + 6;
                sb.append((char) Integer.parseInt(data.substring(i + 2, i + 6), 16));
            }
        }
        Result res=new Result(Constants.CODE_200,null,sb.toString());
        System.out.print(sb);
        return res;

    }
}

vue:

<template>
  <br>
  <br>
  <!--  <p>Base64在线编码解码</p>-->
  <el-card shadow="always" style="text-align: center; margin-right: 100px;margin-left: 100px;height: 600px">
    <el-row>
      <el-col :span="8">

      </el-col>
      <el-col :span="8">
        <div style="font-size: x-large;background-color: darkgreen;color:white;margin: 5px;">
          UNICODE在线编码解码
        </div>
        <el-button style="text-align: right" size="small" icon="el-icon-thumb">
          <el-link href=""
                   target="_blank"
                   style="font-size: 20px;color: darkgreen"

          >Unicode编码详解
          </el-link>
        </el-button>
      </el-col>
      <el-col :span="8">

      </el-col>
    </el-row>


    <div class="el-common-layout">
      <div class="text-area" style="margin: 10px">
        <!--    <textarea v-model="textdata" placeholder="请输入编码字符串或待解码字符串">-->
        <!--    </textarea>-->
        <el-input
            v-model="textdata"
            type="textarea"
            placeholder="Please input"
            style="width: 700px;font-size: 20px"
            :rows=5
        />
      </div>
     
     
    </div>

   

    <el-button @click="encode" type="info" style="margin: 20px">EnCode</el-button>
    <el-button @click="decode" type="info">DeCode</el-button>

    <el-card style="width: 40%;height: 100px;margin-left: 30%;margin-top: 5%">
      <p style="text-align: left">编码/解码结果:</p>
      <p>{{ myresult }}</p>
    </el-card>
  </el-card>

</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      textdata: '',
      myresult: ''
    }

  },
  methods: {
    encode() {
      // alert(this.textdata)
      request.get("/tools/Unicode/encode", {
        params: {
          data: this.textdata
        }
      }).then(res => {
        //alert(res.data);
        this.myresult = res.data
      })
    },
    decode() {
      request.get("/tools/Unicode/decode", {
        params: {
          data: this.textdata
        }
      }).then(res => {
        this.myresult = res.data
      })
    }

  }
}
</script>

<style scoped>

</style>