用JavaScript缩短长字符串的聪明方法

在前端开发中，经常需要处理较长的字符串。当这些字符串需要在页面上展示时，可能会占用大量的空间，影响用户体验。因此，我们需要一些方法来缩短这些字符串，使其在页面上更加美观和易于阅读。本文将介绍用JavaScript缩短长字符串的聪明方法。

方法一：使用substr()

JavaScript内置的substr()函数可以从一个字符串中提取指定长度的子串。通过指定起始位置和结束位置，我们可以截取出想要的子串。以下是一个简单的例子：

const str = "这是一段很长的字符串";
const shortStr = str.substr(0, 5) + "...";
console.log(shortStr); // 输出: "这是一..."

在上述例子中，我们将原始字符串的前5个字符截取出来，并在末尾添加了省略号，以表示这是一个截断的字符串。

方法二：使用slice()

与substr()类似，JavaScript还提供了另一个函数slice()，用于从一个字符串中返回指定部分。不同之处在于，slice()接受负数作为参数，以从字符串的末尾开始计算。以下是一个简单的例子：

const str = "这是一段很长的字符串";
const shortStr = str.slice(0, -2) + "...";
console.log(shortStr); // 输出: "这是一段很长的字..."

在上述例子中，我们将原始字符串的末尾2个字符截取掉，并在末尾添加了省略号。

方法三：使用正则表达式

如果要缩短的字符串长度不固定，可能有多种长度需要处理，那么可以使用正则表达式来解决。以下是一个简单的例子：

const str = "这是一段很长的字符串";
const shortStr = str.replace(/^(.{10}[^\s]*).*/, "$1") + "...";
console.log(shortStr); // 输出: "这是一段很长的..."

在上述例子中，我们通过正则表达式提取了前10个非空格字符，并在末尾添加了省略号。

总结

以上介绍了用JavaScript缩短长字符串的三种聪明方法。这些方法都很简单，并且可以根据需要进行修改和扩展。在实际开发中，我们可以根据具体情况选择合适的方法，以提高用户体验。

参考资料

• MDN Web Docs - String.prototype.substr()
• MDN Web Docs - String.prototype.slice()

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