freeCodeCamp/guide/chinese/certifications/javascript-algorithms-and-d.../basic-algorithm-scripting/truncate-a-string/index.md

6.2 KiB
Raw Blame History

title localeTitle
Truncate a String 截断字符串

:triangular_flag_on_post:如果卡住,请记得使用**Read-Search-Ask** 。尝试配对程序:busts_in_silhouette:并编写自己的代码:pencil:

:checkered_flag:问题说明:

如果字符串长度超过指定的给定最大长度,我们需要减少字符串的长度或截断它,并将...添加到结尾。如果不是那么久,那么我们保持原样。

相关链接

:speech_balloon:提示1

字符串在JavaScript中是不可变的因此我们需要一个新变量来存储截断的字符串。

现在尝试解决问题

:speech_balloon:提示2

您将需要使用slice方法并指定从哪里开始和停止的位置。

现在尝试解决问题

:speech_balloon:提示3

不要忘记,当我们截断这个词时,我们还必须计算加上的长度...

现在尝试解决问题

扰流警报!

警告牌

提前解决!

:beginner:基本代码解决方案

function truncateString(str, num) { 
  // Clear out that junk in your trunk 
  if (str.length > num && num > 3) { 
    return str.slice(0, (num - 3)) + '...'; 
  } else if (str.length > num && num <= 3) { 
    return str.slice(0, num) + '...'; 
  } else { 
    return str; 
  } 
 
 } 

:rocket: 运行代码

代码说明:

  • 首先,我们从一个简单的if语句开始,以确定三个结果之一......
  • 如果我们的字符串长度大于我们想要截断的num 并且我们的截断点至少是字符串中的三个或更多字符我们返回一个字符串切片从字符0开始num - 3结束。然后我们将'...'追加到字符串的末尾。
  • 但是,如果我们的字符串长度大于numnum在前三个字符内,我们不必将点数计算为字符。因此,我们返回与上面相同的字符串,但有一点不同:我们切片的端点现在只是num
  • 最后,如果没有上述情况属实,这意味着我们的字符串长度小于我们的截断num 。因此,我们可以只返回字符串。

:rotating_light:高级代码解决方案

function truncateString(str, num) { 
  if (str.length <= num) { 
    return str; 
  } else { 
    return str.slice(0, num > 3 ? num - 3 : num) + '...'; 
  } 
 } 

:rocket: 运行代码

代码说明:

  • 首先我们需要一个if语句来测试作为第一个参数传入的完整字符串的长度是否已经作为第二个参数传入的大小限制。如果是这样我们可以返回传入的字符串。

    ifstr.length <= num 返回str;

  • 如果上面的if语句失败,我们将移动到else ,我们将返回字符串的“切片”。 slice方法提取字符串的一部分并返回一个新字符串。这里我们传递0作为切片的起点。要确定端点我们使用三元运算符 num > 3 ? num - 3 : num 。在我们的三元组中,如果num大于3我们必须将三个点分解为我们的总长度因此我们将切片结束于num-3 。如果num小于或等于3则我们的切片得到一个只有num的结束变量。最后, '...'被附加到我们新字符串的末尾并被返回。

    } else { return str.slice0num> 3num - 3num+'...'; }

  • 注意为了理解上述代码,您需要了解三元运算符的工作原理。三元运算符经常用作if语句的快捷方式,并遵循以下格式: condition ? expr1 : expr2 。如果condition计算结果为true则运算符返回expr1 。否则,它返回expr2的值。

相关链接

:clipboard:捐款说明:

  • :warning: 请勿添加与任何现有解决方案类似的解决方案。如果您认为它**相似但更好** ,那么尝试合并(或替换)现有的类似解决方案。
  • 添加解决方案的说明。
  • 将解决方案分为以下类别之一 - 基本 中级高级:traffic_light:
  • 如果您添加了任何**相关的主要内容,**请仅添加您的用户名。 :warning: 不要 删除任何现有的用户名

看到:point_right: Wiki Challenge Solution Template供参考。