js 实现字符串与Unicode编码互相转换

在实现字符串与unicode互相转换的过程中，查资料发现 unescape 方法过时了，而手动转换，网上有的写法存在一些问题。
于是整理了一个正常的如下：

PS：方法参数未对空字符串、undefind，null进行判断。

var unicodeHelper = (function () {
        function UnicodeHelper() {
        }

        UnicodeHelper.prototype.enUnicode = function (str) {
            var rs = "";
            for (var i = 0; i < str.length; i++) {
                //补零。不补有些库无法正常解析。保持4位
                //slice负数参数，与其方向相反。start=-1为最后一个元素，end=-1为第一个元素。start必须
                rs += "\\u" + ("0000" + str.charCodeAt(i).toString(16)).slice(-4);
            }
            return rs;
        }
        UnicodeHelper.prototype.deUnicode = function (str) {
            var strArray = str.split("\\u");
            //防止\u开头或结尾，导致解析空串产生的“□”的结果
            if (str.startsWith("\\u")) {
                strArray = strArray.slice(1, strArray.length);
            }
            if (str.endsWith("\\u")) {
                strArray = strArray.slice(0, strArray.length - 1);
            }

            var rs = "";
            for (var i = 0; i < strArray.length; i++) {
                rs += String.fromCharCode(parseInt(strArray[i], 16));
            }
            return rs;
        }
        UnicodeHelper.prototype.deUnicode2 = function (str) {
            str = str.replace(/\\/gi, "%");
            //过时的语法
            return unescape(str);

        }

        return new UnicodeHelper();
    }());

测试一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <title>unicode转换</title>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }

        body {
            font-size: 16px;
        }

        .content {
            margin: 0 auto;
        }

        @media only screen and(min-width: 320px) {
            .content {
                width: 100%;
            }
        }

        @media only screen and(min-width: 800px) {
            .content {
                width: 800px;
            }
        }

        .contain-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        textarea {
            height: 200px;
        }

    </style>
</head>
<body>

<div class="content">

    <div class="contain-wrap">

        <textarea id="elOriginText"></textarea>
        <div>
            <div id="elToUnicode">转为unicode&gt;&gt;</div>
            <div id="elToOrigin">&lt;&lt;unicode解码</div>
        </div>

        <textarea id="elUnicodeText"></textarea>
    </div>
</div>

<script>
    var elToOrigin = document.getElementById("elToOrigin");
    var elToUnicode = document.getElementById("elToUnicode");
    var elUnicodeText = document.getElementById("elUnicodeText");
    var elOriginText = document.getElementById("elOriginText");

    var unicodeHelper = (function () {
        function UnicodeHelper() {
        }

        UnicodeHelper.prototype.enUnicode = function (str) {
            var rs = "";
            for (var i = 0; i < str.length; i++) {
                //补零。不补有些库无法正常解析。保持4位
                //slice负数参数，与其方向相反。start=-1为最后一个元素，end=-1为第一个元素。start必须
                rs += "\\u" + ("0000" + str.charCodeAt(i).toString(16)).slice(-4);
            }
            return rs;
        }
        UnicodeHelper.prototype.deUnicode = function (str) {
            var strArray = str.split("\\u");
            if (str.startsWith("\\u")) {
                strArray = strArray.slice(1, strArray.length);
            }
            if (str.endsWith("\\u")) {
                strArray = strArray.slice(0, strArray.length - 1);
            }

            var rs = "";
            for (var i = 0; i < strArray.length; i++) {
                rs += String.fromCharCode(parseInt(strArray[i], 16));
            }
            return rs;
        }
        UnicodeHelper.prototype.deUnicode2 = function (str) {
            str = str.replace(/\\/gi, "%");
            //过时的语法
            return unescape(str);

        }

        return new UnicodeHelper();
    }());

    elToOrigin.addEventListener("click", function (e) {
        var origin = unicodeHelper.deUnicode(elUnicodeText.value);
        elOriginText.value = origin;
    });
    elToUnicode.addEventListener("click", function (e) {
        var unicode = unicodeHelper.enUnicode(elOriginText.value);
        elUnicodeText.value = unicode;
    });
</script>
</body>
</html>

点此查看结果

js 实现字符串与Unicode编码互相转换

猜你喜欢