鸿蒙大小写转换开发笔记
前言
写这个工具的时候遇到不少坑,比如分隔符处理、首字母大写、特殊字符等等。不过最后都解决了,现在用起来还挺顺手的。
一、功能说明
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 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种格式转换
- 实时预览结果
- 一键复制结果
- 收藏常用设置
有些边角问题其实还没完全搞定,不过大部分场景都能用。后面有空再慢慢优化吧。
五、参考资料
欢迎体验
这个大小写转换工具已经集成到鸿蒙开发者工具箱里了,欢迎下载体验！
作者：在人间耕耘
邮箱：1743914721@qq.com
版权声明：本文为原创文章
如果你也遇到类似问题,欢迎留言交流,搞不定咱们一起头疼
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質文章
