细说Unicode(三) Unicode 番外之附加字符

2019年8月31日 419次阅读 来源: fwon

在种种论坛上，常常会看到一些新鲜的字符，它们的内容会超越显现局限，

举个例子：

'Z͑ͫ̓ͪ̂ͫ̽͏̴̙̤̞͉͚̯̞̠͍A̴̵̜̰͔ͫ͗͢L̠ͨͧͩ͘G̴̻͈͍͔̹̑͗̎̅͛́Ǫ̵̹̻̝̳͂̌̌͘!͖̬̰̙̗̿̋ͥͥ̂ͣ̐́́͜͞'

罕见的另有一些有泰笔墨符构成的。这里就不举例子了。这些看似乱文的字符是怎样构成的呢？

实在它们并非乱文，尝试输出上面谁人例子的字符长度

'Z͑ͫ̓ͪ̂ͫ̽͏̴̙̤̞͉͚̯̞̠͍A̴̵̜̰͔ͫ͗͢L̠ͨͧͩ͘G̴̻͈͍͔̹̑͗̎̅͛́Ǫ̵̹̻̝̳͂̌̌͘!͖̬̰̙̗̿̋ͥͥ̂ͣ̐́́͜͞'.length; //75

发明居然包含了75个字符！我们用Array.from输出这些字符：

Array.from('Z͑ͫ̓ͪ̂ͫ̽͏̴̙̤̞͉͚̯̞̠͍A̴̵̜̰͔ͫ͗͢L̠ͨͧͩ͘G̴̻͈͍͔̹̑͗̎̅͛́Ǫ̵̹̻̝̳͂̌̌͘!͖̬̰̙̗̿̋ͥͥ̂ͣ̐́́͜͞');
//["Z", "͑", "ͫ", "̓", "ͪ", "̂", "ͫ", "̽", "͏", "̴", "̙", "̤", "̞", "͉", "͚", "̯", "̞", "̠", "͍", "A", "ͫ", "͗", "̴", "͢", "̵", "̜", "̰", "͔", "L", "ͨ", "ͧ", "ͩ", "͘", "̠", "G", "̑", "͗", "̎", "̅", "͛", "́", "̴", "̻", "͈", "͍", "͔", "̹", "O", "͂", "̌", "̌", "͘", "̨", "̵", "̹", "̻", "̝", "̳", "!", "̿", "̋", "ͥ", "ͥ", "̂", "ͣ", "̐", "́", "́", "͞", "͜", "͖", "̬", "̰", "̙", "̗"]

再检察个中某个字符的Unicode码点：

Array.from('Z͑ͫ̓ͪ̂ͫ̽͏̴̙̤̞͉͚̯̞̠͍A̴̵̜̰͔ͫ͗͢L̠ͨͧͩ͘G̴̻͈͍͔̹̑͗̎̅͛́Ǫ̵̹̻̝̳͂̌̌͘!͖̬̰̙̗̿̋ͥͥ̂ͣ̐́́͜͞')[10].codePointAt(0);//793,即16进制的0x0319

依据Unicode映射表查找出0x0319对应的字符，发明U+0300~U+036F称为连系附加标记，那末连系附加标记又是什么？
《细说Unicode(三) Unicode 番外之附加字符》

附加标记，是添加在字母上面的标记，以变动字母的发音或许以辨别拼写相似词语。比方汉语拼音字母“ü”上面的两个小点，或“á”、“à”字母上面的标调符。变音标记能够放在字母的上方或下方，也能够放在其他的位置。当多个附加标记叠加的时刻，就构成了看起来像乱码的标记。

而在泰文中，字符的构成也是由一些元音标记和音调标记构成的
《细说Unicode(三) Unicode 番外之附加字符》

所以多个元音标记或音调标记叠加时也会有相似的结果。这里就不再做论述。

在网页开辟中，特别是批评区，假如碰到太多的”插楼”字符，就会对其他用户形成浏览障碍，影响浏览体验，那怎样防止这类状况呢。这里供应两种要领。

第一种是对字符串笔墨地区设置最大高度，超越的部份自动隐藏。

p {
    height: 20px;
    overflow: hidden;
}

另一种体式格局就是对这类特别字符做过滤操纵。将附加字符举行过滤，这类要领在某种程度上会误杀一些须要平常显现的附加标记。但平常也不会影响团体功用，利大于弊。

var regexSymbolWithCombiningMarks = /([\0-\u02FF\u0370-\u1DBF\u1E00-\u20CF\u2100-\uD7FF\uDC00-\uFE1F\uFE30-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF])([\u0300-\u036F\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F]+)/g;

function getSymbolsIgnoringCombiningMarks(string) {
    // 删除附加标记:
    var stripped = string.replace(regexSymbolWithCombiningMarks, function($0, symbol, combiningMarks) {
        return symbol;
    });
    
    return stripped;
}

getSymbolsIgnoringCombiningMarks('Z͑ͫ̓ͪ̂ͫ̽͏̴̙̤̞͉͚̯̞̠͍A̴̵̜̰͔ͫ͗͢L̠ͨͧͩ͘G̴̻͈͍͔̹̑͗̎̅͛́Ǫ̵̹̻̝̳͂̌̌͘!͖̬̰̙̗̿̋ͥͥ̂ͣ̐́́͜͞'); //"ZALGO!"

讲到这里，我们对Unicode已经有了比较仔细的相识。置信在开辟中碰到题目也能找出泉源地点了。

经由过程进修编码的汗青，道理以及查询映射表，我们知道了乱码是怎样发生的，而且应用ES6或正则表达式，来处理绝大多数编码题目。

参考文章：
https://zh.wikipedia.org/wiki
https://mathiasbynens.be/note…

    原文作者：fwon
    原文地址: https://segmentfault.com/a/1190000007992472
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞