如何在 Vue.js 中将驼峰大小写转换为正确大小写？

Posted 2023-03-28

【中文标题】如何在 Vue.js 中将驼峰大小写转换为正确大小写？

【英文标题】：How to convert camel case to proper case in Vue.js?

【发布时间】：2018-12-18 19:00:40

【问题描述】：

我正在从 MongoDB 集合中检索数据并在 ag-grid 中填充数据。我希望列标题在适当的情况下使用间距。最初，该集合有文本行“businessAreaName”，我希望它看起来像“Business Area Name”。

我正在使用正则表达式的概念，但无法找出正确大小写的表达式。

headerName: x.replace(/_/g, ' ').replace(/\w\S*/g, function (txt) 
   
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); 
  )

上面的表达式给我的输出是“Businessareaname”。欢迎提出任何建议。

【问题讨论】：

这样的？ "businessAreaName".replace(/([A-Z])/g, ' $1').replace(/^./, Function.call.bind("".toUpperCase))

@blex 所以 $1 是读取表达式中空格的逻辑吗？

在/([A-Z])/g 正则表达式中，您可以看到括号。这些括号创建了一个捕获组。它捕获每个大写字母，并用空格和字母替换它，用$1 表示。如果表达式有多组括号，则可以使用$1、$2...

访问它们

【参考方案1】：

你真正需要做的就是

用空格替换每个大写字符，然后是该字符 将第一个字符替换为大写

可以这样做：

const deCamelCase = str => str.replace(/[A-Z]/g, ' $&').replace(/^./, toUppercase);
const toUppercase = str => str.toUpperCase();

分解：

str => str.replace(/[A-Z]/g, ' $&')

这匹配任何大写字符（仅限拉丁字母！）并将其替换为由空格组成的字符串，加上整个匹配的字符串，编码为$&。请注意，我们需要使用/g 标志来确保我们匹配每个实例。

str => str.replace(/^./, toUppercase)

这仅匹配字符串中的第一个字符，并使用toUppercase 函数替换它，为了便于阅读，我在单独的行上定义了它。

【讨论】：

没问题。祝你的项目好运！