Vue截取字符串方法

一、Vue截取字符串方法

/**
* @param {string} str - 原始字符串
* @param {Number} len - 截取长度
* @returns {string} - 截取后的字符串
*/
function truncate(str, len) {
  if (str.length <= len) {
    return str;
  } else {
    return str.slice(0, len) + '...';
  }
}

在Vue中截取字符串需要用到JavaScript原生的截取方法，在Vue组件中可以声明一个方法，该方法可以在模板中通过{{ }}调用。自定义方法需要在methods中声明，并在模板中调用。

二、Vue截取字符串最后一个`.`后的字符

/**
* @param {string} str - 原始字符串
* @returns {string} - 截取后的字符串
*/
function truncateAfterDot(str) {
  const lastIndex = str.lastIndexOf('.');
  if (lastIndex === -1) {
    return str;
  } else {
    return str.slice(lastIndex + 1);
  }
}

这段代码实现了截取字符串最后一个.后的字符。lastIndexOf方法可以获取字符串中最后一个.的位置，然后使用slice方法将该位置后面的字符串截取出来。

三、Vue截取字符串后几位

/**
* @param {string} str - 原始字符串
* @param {Number} len - 截取长度
* @returns {string} - 截取后的字符串
*/
function truncateLast(str, len) {
  if (str.length <= len) {
    return str;
  } else {
    return str.slice(-len);
  }
}

这段代码实现了截取字符串后几位。slice方法中传入负数表示从字符串的末尾开始截取。

四、Vue字符串截取字节

/**
* @param {string} str - 原始字符串
* @param {Number} len - 截取长度
* @returns {string} - 截取后的字符串
*/
function truncateByByte(str, len) {
  let byteLen = 0;
  let result = '';
  for (let i = 0; i < str.length; i++) {
    if (byteLen >= len) {
      break;
    } else {
      const charCode = str.charCodeAt(i);
      if (charCode <= 128) {
        byteLen += 1;
      } else {
        byteLen += 2;
      }
      result += str.charAt(i);
    }
  }
  return result;
}

这段代码实现了根据字节数截取字符串。因为中文字符在UTF-8编码中占用2个字节，英文字符占用1个字节，所以需要通过charCodeAt方法获取字符的编码值并根据情况判断。

五、Vue截取字符串后两位

/**
* @param {string} str - 原始字符串
* @returns {string} - 截取后的字符串
*/
function truncateLastTwo(str) {
  if (str.length <= 2) {
    return str;
  } else {
    return str.slice(-2);
  }
}

这段代码实现了截取字符串最后两位。跟“三、Vue截取字符串后几位”的方法类似，只需要通过负数索引获取后面的字符即可。

六、Vue截取字符串长度并换行

/**
* @param {string} str - 原始字符串
* @param {Number} len - 截取长度
* @returns {Array} - 截取后的字符串数组
*/
function truncateByLine(str, len) {
  let result = [];
  let count = 0;
  let line = '';
  for (let i = 0; i < str.length; i++) {
    const charCode = str.charCodeAt(i);
    count += (charCode <= 128) ? 1 : 2;
    if (count > len) {
      result.push(line);
      line = '';
      count = (charCode <= 128) ? 1 : 2;
    }
    line += str.charAt(i);
  }
  result.push(line);
  return result;
}

这段代码实现了根据长度截取字符串并换行。跟“四、Vue字符串截取字节”的方法类似，只是将结果分成了多行，需要使用一个数组存储结果。

七、Vue截取字符串最后一位

/**
* @param {string} str - 原始字符串
* @returns {string} - 截取后的字符串
*/
function truncateLastOne(str) {
  return str.charAt(str.length - 1);
}

这段代码实现了截取字符串最后一位，只需要使用charAt方法获取最后一个字符即可。

八、Vue截取字符串中的一段

/**
* @param {string} str - 原始字符串
* @param {Number} start - 开始位置
* @param {Number} end - 结束位置
* @returns {string} - 截取后的字符串
*/
function truncateForRange(str, start, end) {
  if (end === undefined) {
    return str.slice(start);
  } else {
    return str.slice(start, end);
  }
}

这段代码实现了截取字符串中的一段，可以指定开始位置和结束位置。如果仅指定开始位置，则默认截取开始位置到字符串末尾。

九、Vue截取字符串最后逗号

/**
* @param {string} str - 原始字符串
* @returns {string} - 截取后的字符串
*/
function truncateAfterComma(str) {
  const lastIndex = str.lastIndexOf(',');
  if (lastIndex === -1) {
    return str;
  } else {
    return str.slice(0, lastIndex);
  }
}

这段代码实现了截取字符串最后一个逗号之前的内容。同样是使用lastIndexOf方法获取逗号的位置，并使用slice方法将其之前的内容截取出来。

十、Vue截取字符串第一个字符

/**
* @param {string} str - 原始字符串
* @returns {string} - 截取后的字符串
*/
function truncateFirst(str) {
  return str.charAt(0);
}

这段代码实现了截取字符串的第一个字符，只需要使用charAt方法获取第一个字符即可。

Vue截取字符串