JavaScript自动截取字符串长度,添加省略号(……)的实现方法

在前端开发中，经常需要展示一些较长的文本，为了美观和页面布局的需要，通常会将过长的文本进行截取。而最常见的做法就是在截取的文本末尾添加省略号(……)，以提示用户该文本被截断了。本文将介绍如何使用 JavaScript 实现自动截取字符串长度，并添加省略号。

判断字符串长度

首先，我们需要判断一个字符串的长度是否超出限制。可以使用 String 对象的 length 属性来获取字符串长度。例如：

const str = "Hello, world!";
console.log(str.length); // 输出：13

如果要限制字符串的长度，就需要对字符串长度进行判断。下面是一个函数，用于判断一个字符串的长度是否超出了限制：

function isOverflow(str, maxLength) {
  return str.length > maxLength;
}

这个函数接受两个参数，分别是待判断的字符串和允许的最大长度。如果字符串的长度超过了最大长度，则返回 true；否则返回 false。

截取字符串并添加省略号

当字符串长度超过限制时，我们需要对字符串进行截取，并在结尾添加省略号。下面是一个函数，用于实现这个功能：

function truncate(str, maxLength) {
  if (!isOverflow(str, maxLength)) {
    return str;
  }

  const truncatedStr = str.slice(0, maxLength - 1);
  return `${truncatedStr}…`;
}

这个函数接受两个参数，分别是待截取的字符串和允许的最大长度。如果字符串的长度没有超过限制，则直接返回原始字符串。

如果字符串的长度超过了限制，则使用 String 对象的 slice 方法对字符串进行截取。slice 方法接受两个参数，分别是开始位置和结束位置（不包括结束位置）。因此，在本例中，需要截取从 0 开始，到 maxLength - 1 的位置。

最后，将省略号添加到截取后的字符串末尾，并返回结果。

使用示例

下面是一个使用上述函数的示例：

const longStr = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed metus id libero pretium congue vel nec erat. Donec ac finibus mauris.";
const shortStr = "Hello, world!";

console.log(truncate(longStr, 50)); // 输出：Lorem ipsum dolor sit amet, consectetur adipiscing…
console.log(truncate(shortStr, 10)); // 输出：Hello, wor…

这个示例展示了如何对一个长字符串和一个短字符串进行截取，并在结尾添加省略号。

总结

本文介绍了如何使用 JavaScript 实现自动截取字符串长度，并添加省略号。通过判断字符串长度和使用 String 对象的 slice 方法，可以轻松地实现这个功能。同时，本文还提供了一个使用示例，方便读者进行参考和实践。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1585