显示12个字节

2019独角兽企业重金招聘Python工程师标准>>>

如果你看到这篇文章的标题，隐约或者明确觉得不对劲儿。那，恭喜你！你知道我接下来要说什么了。 听我们的PM 美眉和研发同事在讨论问题，PM说到： “这里展示12个字节”。我一听怎么那么别扭呢？然后就问PM同事说怎么怎么回事。然后PM同事说是这么这么回事。（此处省略若干字……）最终确定这就是一个混沌的说法。因为当时我们的PM和研发同事都没有弄明白下面两个问题。才会产生这样的说法（和做法）。

1. 中英文（不同编码）间，每个字符存储起来占用的空间不一样。
2. 中英文（不同字符）间，每个字符显示出来占用的宽度不一样。

先说第一个问题。上面说的也还是比较笼统的。更加严谨的说法应该是， 同一个字符，采用不同的编码方式表示所占用的空间是可能不一样的；比如：

System.out.println(Arrays.toString("东".getBytes(Charset.forName("UTF-8")))); // [-28, -72, -100]
System.out.println(Arrays.toString("东".getBytes(Charset.forName("GBK")))); // [-74, -85]

同样东东的的“东”字，用UTF-8编码表示，占用了3个字节的长度，用GBK编码表示，占用了两个字节的长度。 同一种编码方式，表示不同的字符所占用的空间也是可能不一样的。比如：

System.out.println(Arrays.toString("东".getBytes(Charset.forName("GBK")))); // [-74, -85]
System.out.println(Arrays.toString("D".getBytes(Charset.forName("GBK")))); // [68]

同样是GBK编码，表示“东”字用了2个字节，而表示大写字母“D”则只用了1个字节。这恐怕就是 流毒无穷的“ 一个中文字符算两个长度”说法的来源了。别再这样说，这是错的！如果你用的UTF-8编码，则可能是一个中文占3个甚至4个长度！ 如果你用的Oracle数据库，相信会有一定的体会。Oracle对varchar类型的字段长度是按照 字节来指定的。所以一个长度为100的varchar字段，最多能存储一个str.length()==100的英文字符串。却只能存储str.length()==50（GBK编码）或str.length()==33（UTF-8编码）的中文字符串。这时候需要在数据录入时控制长度就比较悲催了。就有人出了“ 一个中文字符算两个长度”的馊主意。正确的做法应该是使用相应的编码将字符串转换成字节数组，看字节数组的长度。遗憾的是JavaScript没有提供原生的编码解码实现。 如果你使用的是varchar2类型或者是MySQL数据库，就比较开心了。他们使用的是以字符为单位指定字段的长度。所以数据库长度为100时，前端只要str.length()<=100就一定不会超长了。 关于字符编码，可以看看 维基百科的解释。 再说第二个问题，不同的字符，显示出来占用的宽度不一样。同样，上面的说法也是比较笼统的， 一个字符在屏幕上显示的宽度，同时受字号（font-size）和字体(font-family)的影响。 先说字号。一般情况我们会写：

font-size:12px;

一个字符显示在屏幕上。是一个二维的概念，有宽度和高度，那这个12px到底是说这个字符的宽度为12px还是高度为12px呢？都不是！font-size实际上设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

<style type="text/css">
p {font-size: 80px}
</style>

<p>aaaAAA222中中中</p>

  可以看到，font-size设置为80px时，中文，英文，数字的实际高度都没有超过80。具体会有多高其实不用太关心，只要知道font-size越大，展示出来的字也越大就可以了。显示上的事是一个主观感受上的事。再看宽度，同样是80px的字号，小写字母，大写字母，数字和中文占的宽度也不一样，上图应该能比较明显的看出来，就不做对比图了。 再说字体，比如：

<style type="text/css">
p {font-size: 30px}
.p1{font-family:serif}
.p2{font-family:monospace}
</style>

<p class="p1">abcdefghijklmn</p>
<p class="p2">abcdefghijklmn</p>

同样的内容“abcdefghijklmn ”，同样的字号“30px”，不同的字体“serif”和“mogospace”. 所占用的宽度是不一样的。由这点可以看出用str.subString(0, n) + "..." 的方式来实现“文本超长则用省略号表示”是不靠谱的。正确的做法应该是用css在展示的时候实现。

<style type="text/css">
p {
    width:100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>

<p>我很长，我真的很长</p>

关于文本溢出问题，推荐阅读 这篇文章。其实拿大腿想想也是这样的，文本溢出是显示上的问题，按照“职责分配原则”中的“专家原则”也不能将显示的事儿交给数据处理去做。 好吧，就到这吧。希望看完这篇文章的同学不会再说出“一个中文算两个长度”和“这里显示12个字节”这样的话了。那我就功德圆满了。

转载于:https://my.oschina.net/laichendong/blog/283791