零宽连字符号

发表于 分类于 阅读次数： Disqus：
零宽连字是一个控制字符，放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的 Unicode 码位是 `U+200D`，HTML 实体标识是 `‍` 或者 `‍`

零宽连字

在掘金上看到一篇讲 JavaScript 字符串截取的文章 掘金:【JavaScript文本截取】该死的Emoji表情，里面提到了一个组合字符，以前不知道这个知识，初次看到感觉也挺有意思的，顺便在自己做的字符串转 Unicode/HTML 实体的小工具上做了下实验，并把转换后的 HTML 实体字符放入 HTML 内容中实际查看了下结果。

然后我发现在页面上显示的确实是组合字符，但是开发者工具中 Element 栏内，却显示的是两个分开的字符，中间以 ‍ 连接。而这个中间的连字符我原本应该输入的是 ‍ 才对。我猜测应该类似于 < > 这些具有名称的实体。所以就搜索了下 ‍，然后就在维基百科内找到了 零宽连字 这一条目。

实际看下来，感觉挺有趣的，所以就把这个零宽连字记一下。

根据维基百科的描述，零宽连字就是把前后两个字符组合成一个具有连字效果的字符，当然前提是前后两个字符确实是可以组合的，不然的话并不会出现连字效果。

比如我看到的这篇掘金文章中提到的组合：

1
2
// 👩 + 🦱 = 👩‍🦱
'👩\u200d🦱' // 👩‍🦱

在 HTML 中也可以这么写：

1
<p>👩&zwj;🦱</p> <!-- 👩‍🦱 -->

👩‍🦱

再比如维基百科上的例子：

1
2
// 👨 + 👩 + 👦 = 👨‍👩‍👦
'👨\u200d👩\u200d👦' // 👨‍👩‍👦
1
2
<!-- &zwj; 用码点实体就是 &#8205; -->
<p>👨&zwj;👩&#8205;👦</p> <!-- 👨‍👩‍👦 -->

👨‍👩‍👦

但是如果是本身不具有连字效果的两个字符的话，并不会有什么强加的连字效果：

1
'Y\u200dY' // YY
1
<p>Y&zwj;Y</p>

Y‍Y

参考链接

  • 掘金:【JavaScript文本截取】该死的Emoji表情
  • Wiki: 零宽连字