当前位置：首页 > news >正文

开发者工具箱-鸿蒙大小写转换开发笔记

news 来源：原创 2025/5/25 8:01:02

鸿蒙大小写转换开发笔记

前言

最近在搞鸿蒙工具箱,想着加个大小写转换功能。这玩意主要是用来转换各种命名格式,比如把"hello world"转换成"HelloWorld"、“HELLO_WORLD”、"hello-world"等等。本来以为挺简单的,结果发现要处理各种格式,调试了好几次才搞定。

写这个工具的时候遇到不少坑,比如分隔符处理、首字母大写、特殊字符等等。不过最后都解决了,现在用起来还挺顺手的。

一、功能说明

1.1 主要功能

支持14种不同的文本格式转换
实时预览转换结果
一键复制结果
收藏功能

1.2 界面功能

文本输入框
格式选择列表
结果显示
复制按钮

二、实现过程

2.1 开发小故事

记得刚开始写这个功能的时候,我直接用了网上找的一个转换函数,结果发现各种问题。比如输入"hello-world"的时候,转换出来是"helloWorld",但是用户说不对,应该是"helloWorld"。后来查了一下,发现不同场景下对分隔符的处理要求不一样,有的要保留,有的要去掉,真是头疼。

还有一次,用户反馈说输入"hello_world"的时候,转换出来是"helloWorld",但是他想看到"HelloWorld"。这个需求让我改了好几次代码,最后加了个判断,首字母要大写。

最搞笑的是处理特殊字符的问题。一开始没处理特殊字符,结果用户输入了"hello@world",转换出来是"hello@world",但是用户说不对,应该把@也当作分隔符。后来赶紧加了个处理,把特殊字符也当作分隔符。

2.2 临时解决方案

分隔符处理问题
- 临时方案：直接用正则把分隔符替换成空格,图省事
- 问题：有时候会把不该替换的分隔符也替换了,结果一堆奇怪的结果
- 最终方案：老老实实用正则表达式分割输入文本,保留分隔符,虽然麻烦点,但靠谱
首字母大写问题
- 临时方案：直接转大写,不管位置,简单粗暴
- 问题：有时候会把不该大写的字母也大写了,用户不乐意
- 最终方案：根据格式类型判断是否需要大写,体验好多了
特殊字符处理
- 临时方案：直接忽略特殊字符,省事
- 问题：用户说不对,应该把特殊字符也当作分隔符
- 最终方案：把特殊字符也当作分隔符处理,虽然麻烦点,但用户满意
格式选择问题
- 临时方案：用下拉框选择格式,简单
- 问题：用户说不好用,要一个个试,太麻烦了
- 最终方案：用Radio组件实现格式选择,方便切换,用户体验好多了

2.3 调试案例

转换实现

private convertCase(text: string, type: CaseType): string {const words = text.trim().split(/[\s-_./]+/)switch (type) {case CaseType.LOWER:return text.toLowerCase()case CaseType.UPPER:return text.toUpperCase()case CaseType.CAMEL:return words.map((word, index) => index === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('')case CaseType.CAPITAL:return words.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ')case CaseType.CONSTANT:return words.map(word => word.toUpperCase()).join('_')case CaseType.DOT:return words.map(word => word.toLowerCase()).join('.')case CaseType.HEADER:return words.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('-')case CaseType.DEFAULT:return words.map(word => word.toLowerCase()).join('-')case CaseType.PARAM:return words.map(word => word.toLowerCase()).join('_')case CaseType.PASCAL:return words.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('')case CaseType.PATH:return words.map(word => word.toLowerCase()).join('/')case CaseType.SENTENCE:return words.map((word, index) => index === 0 ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() :word.toLowerCase()).join(' ')case CaseType.SNAKE:return words.map(word => word.toLowerCase()).join('_')case CaseType.MOCK:return text.split('').map((char, index) => index % 2 === 0 ? char.toLowerCase() : char.toUpperCase()).join('')default:return text}
}

这个转换函数我真是改了又改。最开始用了个简单的算法,结果发现处理不了特殊字符。后来改成了正则分割,但是处理首字母大写的时候又出问题了。最后改成了现在的算法,虽然代码看起来有点乱,但是能处理各种情况。

格式选择实现

enum CaseType {LOWER = 'lower',         // 小写式: hello worldUPPER = 'upper',         // 大写式: HELLO WORLDCAMEL = 'camel',         // 驼峰式: helloWorldCAPITAL = 'capital',     // 首大式: Hello WorldCONSTANT = 'constant',   // 常量式: HELLO_WORLDDOT = 'dot',            // 点符式: hello.worldHEADER = 'header',      // 标头式: Hello-WorldDEFAULT = 'default',    // 默认式: hello-worldPARAM = 'param',        // 参数式: hello_worldPASCAL = 'pascal',      // 帕斯卡式: HelloWorldPATH = 'path',          // 路径式: hello/worldSENTENCE = 'sentence',  // 语句式: Hello worldSNAKE = 'snake',        // 蛇形式: hello_worldMOCK = 'mock'          // 模拟式: hElLo WoRlD
}