将字符串转换为短横线命名法

简介

在本实验中，我们将探索如何使用 JavaScript 将给定的字符串转换为短横线命名法（kebab case）。短横线命名法是编程中一种常见的命名约定，字符串中的单词由连字符分隔。我们将使用正则表达式和数组方法将字符串拆分为单词，然后使用短横线命名法格式将它们组合起来。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28653{{"使用 JavaScript 将字符串转换为短横线命名法"}} javascript/data_types -.-> lab-28653{{"使用 JavaScript 将字符串转换为短横线命名法"}} javascript/arith_ops -.-> lab-28653{{"使用 JavaScript 将字符串转换为短横线命名法"}} javascript/comp_ops -.-> lab-28653{{"使用 JavaScript 将字符串转换为短横线命名法"}} javascript/higher_funcs -.-> lab-28653{{"使用 JavaScript 将字符串转换为短横线命名法"}} end

要将字符串转换为短横线命名法，请执行以下步骤：

打开终端/SSH 并输入 node 以开始练习编码。
使用 String.prototype.match() 通过适当的正则表达式将字符串拆分为单词。
使用 Array.prototype.map()、Array.prototype.join() 和 String.prototype.toLowerCase() 来组合单词，并添加 - 作为分隔符。

以下是一个执行转换的示例函数：

const toKebabCase = (str) =>
  str &&
  str
    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
    .map((x) => x.toLowerCase())
    .join("-");

你可以使用此函数将字符串转换为短横线命名法，如下所示：

toKebabCase("camelCase"); // 'camel-case'
toKebabCase("some text"); // 'some-text'
toKebabCase("some-mixed_string With spaces_underscores-and-hyphens");
// 'some-mixed-string-with-spaces-underscores-and-hyphens'
toKebabCase("AllThe-small Things"); // 'all-the-small-things'
toKebabCase("IAmEditingSomeXMLAndHTML");
// 'i-am-editing-some-xml-and-html'

总结

恭喜你！你已经完成了短横线命名法字符串实验。你可以在 LabEx 中练习更多实验来提升你的技能。