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 = 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  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方法獲取第一個字符即可。