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

前言

最近在搞鸿蒙工具箱,想着加个大小写转换功能。这玩意主要是用来转换各种命名格式,比如把"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 调试案例

转换实现privateconvertCase(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 world UPPER='upper', // 大写式: HELLO WORLD CAMEL='camel', // 驼峰式: helloWorld CAPITAL='capital', // 首大式: Hello World CONSTANT='constant', // 常量式: HELLO_WORLD DOT='dot', // 点符式: hello.world HEADER='header', // 标头式: Hello-World DEFAULT='default', // 默认式: hello-world PARAM='param', // 参数式: hello_world PASCAL='pascal', // 帕斯卡式: HelloWorld PATH='path', // 路径式: hello/world SENTENCE='sentence', // 语句式: Hello world SNAKE='snake', // 蛇形式: hello_world MOCK='mock' // 模拟式: hElLo WoRlD}

这个枚举定义也改了好几次。最开始只支持几种格式,后来用户说不够用,就加了好多格式。最搞笑的是"模拟式",就是大小写交替的那种,一开始我还觉得没啥用,结果还真有人用。

三、踩坑记录

3.1 遇到的问题

分隔符处理问题

问题：用户输入不规范,比如多个分隔符解决：加了正则分割,自动处理建议：输入时就限制格式,别给自己找麻烦

首字母大写问题

问题：首字母大写不规范解决：根据格式类型判断建议：其实可以让用户自定义

特殊字符处理问题

问题：特殊字符处理不规范解决：把特殊字符也当作分隔符建议：有空可以加个自定义选项

格式选择问题

问题：格式选择不方便解决：用Radio组件实现建议：可以自定义格式

3.2 优化建议

功能优化

支持更多格式加个历史记录支持批量转换格式分类、导入导出、管理、分享、备份啥的都能加

性能优化

优化转换速度减少内存占用及时释放资源多线程、算法优化、结果缓存、异步处理都可以试试

用户体验

加个使用说明支持快捷键动画效果、主题、分享、收藏、导入、备份啥的都能加四、总结

这个大小写转换工具,基本功能都齐了：

支持14种格式转换实时预览结果一键复制结果收藏常用设置

有些边角问题其实还没完全搞定,不过大部分场景都能用。后面有空再慢慢优化吧。

欢迎体验