前言

先来看看要接的后端接口文档：

一些参数是根据字节数来去限制它的长短的。

在开发中，经常需要控制用户输入的字符串长度，来确保输入的内容符合规范，没错，我们这篇呢，用字节数来算，而不是算长度length来控制。

心路历程

首先我想着，从数据库表的方面想，它这个文档全篇用这个字节来限制参数的长度，可能是想要更好地控制数据的大小，避免一些情况下数据溢出或者其他问题吧，这个我无从考究，但，对接的接口文档，全篇全用字节数的长度来控制字符串的长度。

|

既然，我来接，肯定要按照他们后端给出的接口数据那边接，再者，我看接口的社区，有很多提问篇幅讲到字节截断的问题——超过了给定的字节，就截断了，没有问题。但是我这边的字符串运营的有中文、英文、数字，除此之外还有emoji。

|

所以如果从emoji中间截断是会出现一些乱码的，譬如🙂、🔴、👉这样的诸如此类的emoji。截断如果出现乱码，是会给数据造成一些影响。这是一些后话，当前要做的，就是根据参数给定的指定的字节数来控制这个参数的长度。

|

解决原理

之前我们做的很多的是关于通过长度来截取字符串的。

第一个就是 String.prototype.slice()

根据索引也就是index来任意截取字符串的，可以相应回顾一下这个方法。那么这里我们这里根据字节数来截取字符串长度的话，就是截取字符串前面，所以待会会用到string.slice(0, index)，这个index就是超过字节数的那个某个字的index。

第二个就是String.prototype.substring()

其中，用法跟slice差不多类似，如果需要用到这个例子的话,也是string.substring(0, index)。

解决过程

input

Ant Design Vue [3.2.20]

页面代码:

获取字符串所占用的字节数

用new Blob([title]).size这个方法计算这个input标题的所占用的字节数。

通过new Blob([title])来创一个blob对象，然后来计算标题字符串占用的字节数。

超过，就截取，不超过就留下来。

    <a-input
      class="my-input"
      v-model:value="title"
      placeholder="标题"
      suffix="最多64个字节"
      @change="changeTitle"
    />

    const changeTitle = () => {
      if (!title.value) return;
      console.log(title.value);
      const byte = new Blob([title.value]).size;
      console.log("字节数", byte);
      
      if (byte > 64) title.value = truncateStringByBytes(title.value, 64)
    };
    

不同字符所占用多少字节

到这一步呢，我们就先看看中文、英文、数字、emoji分别占了多少字节。

• 1 —— 字节数 1
• M —— 字节数 1
• 我 —— 字节数 3
• 🔴 —— 字节数 4

数字：

数字采用ASCII编码，每个数字占1个字节（8位）。

英文：

英文也是采用ASCII编码，每个英文字符占用1个字节（8位）。

ASCII编码只使用8位二进制数来表示128个字符，包括26个英文字母、数字、一些标点符号等。

中文：

在UTF-8编码方式中，一个中文字符占用3个字节。注意，我们这里讲UTF-8这种编码方式，在Unicode中和GBK中又不一样，这个可以查阅相关的文档来去做判断。

emoji：

emoji是一种基于Unicode版本编码的表情符号， Unicode6.4版本以上，每个emoji占4个字节。这里需要注意的一点是，一个emoji字符的长度是2个字符长度。也就是说，下面代码可以说明:

定义 通过字节数截取字符串 的 函数

取名叫 truncateStringByBytes

这里值得一提的就是 emoji 在字符串中的 全部匹配正则

  // 匹配字符串中的emoji
  const regex = /[\u{1F000}-\u{1F9FF}]|\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu;
  const emojiArr = str.match(regex);

得到这个就可以知道，当前到字节数是不是切断了emoji的中间（也就是拦腰斩断导致乱码，emoji变样），只要到emoji中间切断的，一律当前这个emoji都不要了，所以要当前下标 - 1。

拦腰的出现的效果：

最终效果

总结

这个本身是说，后端截断就截断了，无所谓，运营人员注意点就行了。

但是如果纯给后端截断的话，就会出现emoji中间破半分导致乱码，到时候发给客户端的效果就不好。

而且，运营人员是没办法判断字节数长短的，只能上网搜网站，每次一做就看看当前文本字节数多少超了没。效率不好而且可行性有点差。

这里前端先过一遍，通过字节数拦掉超过的长度。

以上是《关于运用 vue3 ant-design 的input, 根据字节数来控制字符串的长度的需求的解决》的全文。

希望对刚好有这个需求的小伙伴有所帮助。

最好的学习是输出

欢迎评论区留言共同学习