在前端开发中，我们经常需要缩短长字符串以适应 UI 布局或者避免超出限制。一般情况下，我们会使用 substr() 或者 substring() 函数截取字符串的一部分。但是这个方法会截断单词，导致缩短后的字符串看起来很奇怪。那么有没有一种方法可以更好地缩短字符串而不影响单词的完整性呢？本文将介绍如何用 JavaScript 实现这个功能。
方法一：基于单词长度缩短字符串
第一个方法是基于单词长度来缩短字符串。具体步骤如下：
- 将字符串按空格分割成单词数组。
- 遍历单词数组，并计算每个单词的长度。
- 如果当前字符串长度已经小于目标长度，则直接返回原字符串。
- 如果当前字符串长度减去最后一个单词的长度小于等于目标长度，则只保留前面的单词。
- 否则，从前往后逐个移除单词，直到字符串长度小于等于目标长度。
下面是代码示例：
-- -------------------- ---- -------
-------- ------------------ ---------- -
----- ----- - ----------- ---
----- ----------- - -------------- -- -------------
--- ----------- - --
--- ---------- - -------------
--- ---- - - -- - - ------------- ---- -
----------- -- -------------- - -- -- --- - --- --- -----
-- ------------ - ---------- -
---------- - --
------
-
-
----- -------------- - -------------- ------------
------ --------------------- ---
-
----- ---------- - ------ ----- ----- --- ----- ----------- ---------- ----- --- ------- ----- -- ------ --------- -------------
----- --------------- - ------------------------- ----
----------------------------- -- ------ ----- ----- --- ----- ----------- -----------方法二：基于单词个数缩短字符串
第二个方法是基于单词个数来缩短字符串。具体步骤如下：
- 将字符串按空格分割成单词数组。
- 如果目标长度小于等于 1，则直接返回一个空字符串。
- 如果目标长度大于等于单词数组的长度，则直接返回原字符串。
- 否则，从前往后逐个移除单词，直到只剩下目标长度个单词。
下面是代码示例：
-- -------------------- ---- -------
-------- ------------------ --------- -
----- ----- - ----------- ---
-- --------- -- -- -
------ ---
- ---- -- --------- -- ------------- -
------ ----
- ---- -
----- -------------- - -------------- ----------
------ --------------------- ---
-
-
----- ---------- - ------ ----- ----- --- ----- ----------- ---------- ----- --- ------- ----- -- ------ --------- -------------
----- --------------- - ------------------------- ---
----------------------------- -- ------ ----- ----- --- ----- ------------总结
本文介绍了两种方法来缩短字符串而不影响单词的完整性。基于单词长度的方法可以让缩短后的字符串更自然，但是可能会涉及到复杂的计算逻辑。基于单词个数的方法则相对简单，但是可能会导致一些单词被截断。根据具体需求选择合适的方法即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14236