JS实现含有中文字符串的友好截取功能分析

让我来详细讲解一下 "JS实现含有中文字符串的友好截取功能分析" 的完整攻略。

1. 背景

在前端开发中，经常需要对文本进行截取展示，但是如果直接使用JS自带的字符串截取方法，会出现截取中文时的问题。因为中文字符在计算机中占用两个字节，如果按照字节截取，就会出现乱码或者截取到半个中文的情况。因此，我们需要对字符串截取封装一个方法，可以实现友好的中英文截取，而不会影响字符串的完整性。

2. 加载第三方插件或工具库

两个主流的工具库提供了字符串截取的函数，并且针对中英文截取都有优秀的解决方案。这两个工具库分别是：Lodash 和 Substring.slice() 方法。在使用前需要先引入对应的文件或依赖。

以Lodash为例：

<script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js"></script>

3. 实现友好的中英文字符串截取方法

/**
 * 中英文混合字符串的截取
 * @param {string} str - 待截取的字符串
 * @param {number} len - 截取的长度
 * @returns {string} 返回截取后的字符串
 */
function cutString(str, len) {
  // 如果字符串为空或长度为0，直接返回空字符串
  if (!str || !len) {
    return '';
  }
  // 将正则表达式表示为任何非英文或数字字符或非标点符号字符的字符
  const regex = /[^\x00-\xff]|\w|\d|\s+/g;
  // 迭代计算截取子串的真实长度
  let count = 0;
  let subString = '';
  for (let i = 0; i < str.length; i++) {
    const nowChar = str.charAt(i);
    // 使用正则表达式测试当前字符是否为非英文或数字字符或非标点符号字符的字符
    const isMatch = regex.test(nowChar);
    if (isMatch) {
      count += 2;
    } else {
      count += 1;
    }
    if (count <= len) {
      subString += nowChar;
    } else {
      break;
    }
  }
  return subString;
}

上述方法实际上是通过循环一个字符串，通过正则表达式识别中英文字符的宽度，将每一个字符对应的宽度计算在内，最后生成子字符串。

4. 示例展示

具体应用场景中，可以如下展示：

const str = '这是一个混合字符串，中文和English都包含在其中。This is a mixed string, it contains both Chinese and English.';
// 使用Lodash库提供的_.truncate()方法
const shortStr1 = _.truncate(str, { length: 16 });
console.log(shortStr1); // 这是一个混合字符...
// 使用自定义的cutString()方法
const shortStr2 = cutString(str, 16)
console.log(shortStr2); // 这是一个混合字...

上述示例中，分别使用了Lodash库提供的方法和自定义的方法实现随意截取字符串并保证完整性。