@qubit-ltd/naming-style
naming-style 是一个JavaScript库,用于转换标志符的命名风格。它支持多种编程语言的命名规范, 包括Java、C++和Python,能够方便地在不同的大小写风格之间进行转换。这个库体积小巧,没有外部依赖, 并且保持100%的测试覆盖率。
目录
安装方法
通过 npm
安装:
npm install @qubit-ltd/naming-style
或者通过 yarn
安装:
yarn add @qubit-ltd/naming-style
使用示例
基本用法 - 将连字符格式转换为小驼峰格式:
import NamingStyle from '@qubit-ltd/naming-style';
const str = 'hello-world-boy';
const converted = NamingStyle.LOWER_HYPHEN.to(NamingStyle.LOWER_CAMEL, str);
console.log(converted); // 输出 "helloWorldBoy"
简化用法 - 直接导入命名风格常量:
import { LOWER_HYPHEN, LOWER_CAMEL } from '@qubit-ltd/naming-style';
const str = 'hello-world-boy';
const converted = LOWER_HYPHEN.to(LOWER_CAMEL, str);
console.log(converted); // 输出 "helloWorldBoy"
在多种风格之间转换:
import { LOWER_HYPHEN, LOWER_UNDERSCORE, LOWER_CAMEL, UPPER_CAMEL, UPPER_UNDERSCORE } from '@qubit-ltd/naming-style';
const kebabCase = 'user-first-name';
const snakeCase = LOWER_HYPHEN.to(LOWER_UNDERSCORE, kebabCase);
const camelCase = LOWER_HYPHEN.to(LOWER_CAMEL, kebabCase);
const pascalCase = LOWER_HYPHEN.to(UPPER_CAMEL, kebabCase);
const constantCase = LOWER_HYPHEN.to(UPPER_UNDERSCORE, kebabCase);
console.log(snakeCase); // "user_first_name"
console.log(camelCase); // "userFirstName"
console.log(pascalCase); // "UserFirstName"
console.log(constantCase); // "USER_FIRST_NAME"
使用方法
导入
导入NamingStyle
类:
import NamingStyle from '@qubit-ltd/naming-style';
或者导入表示各种命名风格的全局常量:
import {
LOWER_HYPHEN,
LOWER_UNDERSCORE,
LOWER_CAMEL,
UPPER_CAMEL,
UPPER_UNDERSCORE,
} from '@qubit-ltd/naming-style';
转换字符串格式
使用 NamingStyle
类的静态实例来转换字符串格式。例如,将 lower-hyphen
命名风格的字符串
转换为其他风格:
import NamingStyle from '@qubit-ltd/naming-style';
expect(NamingStyle.LOWER_HYPHEN.to(NamingStyle.LOWER_HYPHEN, 'hello-world')).toBe('hello-world');
expect(NamingStyle.LOWER_HYPHEN.to(NamingStyle.LOWER_UNDERSCORE, 'hello-world')).toBe('hello_world');
expect(NamingStyle.LOWER_HYPHEN.to(NamingStyle.LOWER_CAMEL, 'hello-world')).toBe('helloWorld');
expect(NamingStyle.LOWER_HYPHEN.to(NamingStyle.UPPER_CAMEL, 'hello-world')).toBe('HelloWorld');
expect(NamingStyle.LOWER_HYPHEN.to(NamingStyle.UPPER_UNDERSCORE, 'hello-world')).toBe('HELLO_WORLD');
你也可以直接导入常量来使用更简洁的语法:
import { LOWER_HYPHEN, LOWER_UNDERSCORE, LOWER_CAMEL, UPPER_CAMEL, UPPER_UNDERSCORE } from '@qubit-ltd/naming-style';
expect(LOWER_HYPHEN.to(LOWER_HYPHEN, 'hello-world')).toBe('hello-world');
expect(LOWER_HYPHEN.to(LOWER_UNDERSCORE, 'hello-world')).toBe('hello_world');
expect(LOWER_HYPHEN.to(LOWER_CAMEL, 'hello-world')).toBe('helloWorld');
expect(LOWER_HYPHEN.to(UPPER_CAMEL, 'hello-world')).toBe('HelloWorld');
expect(LOWER_HYPHEN.to(UPPER_UNDERSCORE, 'hello-world')).toBe('HELLO_WORLD');
可用的格式转换
本函数库提供以下格式常量,并允许在它们之间进行转换:
NamingStyle.LOWER_HYPHEN
:使用连字符分隔的小写字母,例如"lower-hyphen"
。 此命名风格常用于 XML 的标签名、HTML 属性和 CSS 属性名。NamingStyle.LOWER_UNDERSCORE
:使用下划线分隔的小写字母,例如"lower_underscore"
。 此命名风格常用于 C++ 和 Python 的变量名和属性名。NamingStyle.LOWER_CAMEL
:首字母小写的驼峰命名法,例如"lowerCamel"
。 此命名风格常用于 Java 的变量名和属性名,以及 JavaScript。NamingStyle.UPPER_CAMEL
:首字母大写的驼峰命名法,例如"UpperCamel"
。
此命名风格常用于 Java 和 C++ 的类名,以及 React 组件名。NamingStyle.UPPER_UNDERSCORE
:使用下划线分隔的大写字母,例如"UPPER_UNDERSCORE"
。 此命名风格常用于 Java 和 C++ 的常量名。
获取所有格式
使用 NamingStyle.values()
方法可获取所有可用的格式常量列表:
const formats = NamingStyle.values();
expect(formats).toEqual([
NamingStyle.LOWER_HYPHEN,
NamingStyle.LOWER_UNDERSCORE,
NamingStyle.LOWER_CAMEL,
NamingStyle.UPPER_CAMEL,
NamingStyle.UPPER_UNDERSCORE,
]);
根据名称获取格式
使用 NamingStyle.of(name)
方法可根据名称获取对应的格式对象。
该方法接受一个字符串或一个 NamingStyle
实例作为参数;字符串参数大小写不敏感,'-'
和'_'
被视为等同。
let format = NamingStyle.of('lower-camel');
expect(format).toBe(NamingStyle.LOWER_CAMEL);
format = NamingStyle.of('LOWER-CAMEL');
expect(format).toBe(NamingStyle.LOWER_CAMEL);
format = NamingStyle.of('lower_camel');
expect(format).toBe(NamingStyle.LOWER_CAMEL);
format = NamingStyle.of('LOWER_CAMEL');
expect(format).toBe(NamingStyle.LOWER_CAMEL);
format = NamingStyle.of(NamingStyle.LOWER_CAMEL);
expect(format).toBe(NamingStyle.LOWER_CAMEL);
如果提供的名称不存在,将抛出错误。
快捷常量
除了使用 NamingStyle
类成员常量,还可以通过以下全局常量直接访问不同的大小写格式:
import {
LOWER_HYPHEN,
LOWER_UNDERSCORE,
LOWER_CAMEL,
UPPER_CAMEL,
UPPER_UNDERSCORE,
} from '@qubit-ltd/naming-style';
expect(LOWER_HYPHEN.to(LOWER_HYPHEN, 'hello-world')).toBe('hello-world');
expect(LOWER_HYPHEN.to(LOWER_UNDERSCORE, 'hello-world')).toBe('hello_world');
expect(LOWER_HYPHEN.to(LOWER_CAMEL, 'hello-world')).toBe('helloWorld');
expect(LOWER_HYPHEN.to(UPPER_CAMEL, 'hello-world')).toBe('HelloWorld');
expect(LOWER_HYPHEN.to(UPPER_UNDERSCORE, 'hello-world')).toBe('HELLO_WORLD');
高级用法
批量处理
当需要一次性转换多个字符串时,可以进行批量处理:
import { LOWER_HYPHEN, LOWER_CAMEL } from '@qubit-ltd/naming-style';
const kebabCaseStrings = [
'user-name',
'email-address',
'phone-number'
];
const camelCaseStrings = kebabCaseStrings.map(str =>
LOWER_HYPHEN.to(LOWER_CAMEL, str)
);
console.log(camelCaseStrings); // ["userName", "emailAddress", "phoneNumber"]
错误处理
该库能够优雅地处理边缘情况:
import { LOWER_HYPHEN, UPPER_CAMEL, NamingStyle } from '@qubit-ltd/naming-style';
// 处理 null 或 undefined
console.log(LOWER_HYPHEN.to(UPPER_CAMEL, null)); // ""
console.log(LOWER_HYPHEN.to(UPPER_CAMEL, undefined)); // ""
// 处理空字符串
console.log(LOWER_HYPHEN.to(UPPER_CAMEL, "")); // ""
// 使用无效命名风格时的错误
try {
NamingStyle.of("invalid-style");
} catch (error) {
console.error(error.message); // "No naming style found with name: invalid-style"
}
与其他工具集成
这个库可以轻松地与其他工具和框架集成:
与 React 组件命名集成:
import React from 'react';
import { LOWER_UNDERSCORE, LOWER_CAMEL } from '@qubit-ltd/naming-style';
// 将 API 响应字段(snake_case)转换为 React 组件属性(camelCase)
function processApiData(apiData) {
const processedData = {};
Object.keys(apiData).forEach(key => {
const camelKey = LOWER_UNDERSCORE.to(LOWER_CAMEL, key);
processedData[camelKey] = apiData[key];
});
return processedData;
}
function UserProfile({ userData }) {
const processedData = processApiData(userData);
return (
<div>
<h1>{processedData.userName}</h1>
<p>{processedData.emailAddress}</p>
</div>
);
}
与 Express 路由参数集成:
import express from 'express';
import { LOWER_HYPHEN, LOWER_CAMEL } from '@qubit-ltd/naming-style';
const app = express();
// 将路由参数从 kebab-case 转换为 camelCase
app.param(['user-id', 'item-id'], (req, res, next, value, name) => {
const camelName = LOWER_HYPHEN.to(LOWER_CAMEL, name);
req.params[camelName] = value;
next();
});
app.get('/users/:user-id/items/:item-id', (req, res) => {
console.log(req.params.userId); // 使用 camelCase 访问
console.log(req.params.itemId); // 使用 camelCase 访问
// 处理程序的其余部分
});
性能特点
该库被设计为轻量级和高效:
- 零依赖:没有外部依赖,不会增加你的打包体积
- 体积小:压缩后小于 10KB
- 优化的算法:高效的字符串操作,最小化开销
- 不可变对象:所有
NamingStyle
实例都是不可变的,可以重复使用
测试覆盖率
该库在所有文件和功能上保持 100% 的测试覆盖率:
------------------------------|---------|----------|---------|---------|------------------
文件 | % 语句 | % 分支 | % 函数 | % 行 | 未覆盖行号
------------------------------|---------|----------|---------|---------|------------------
所有文件 | 100 | 100 | 100 | 100 |
src | 100 | 100 | 100 | 100 |
index.js | 100 | 100 | 100 | 100 |
naming-style.js | 100 | 100 | 100 | 100 |
src/impl | 100 | 100 | 100 | 100 |
find-first.js | 100 | 100 | 100 | 100 |
first-char-only-to-upper.js | 100 | 100 | 100 | 100 |
------------------------------|---------|----------|---------|---------|------------------
全面的测试确保所有边缘情况和正常使用场景都能按预期工作。
浏览器兼容性
该库与所有现代浏览器和 Node.js 环境兼容。它使用 ES5 语法以确保最大兼容性:
- Chrome 45+
- Firefox 38+
- Safari 9+
- Edge 12+
- IE 11(使用适当的 polyfills)
- Node.js 6.0.0+
贡献方法
如果你发现任何问题或有改进建议,欢迎提交 issue 或者 PR 到本项目的 GitHub 仓库。
我们欢迎贡献!要贡献代码,请:
- Fork 本仓库
- 创建你的功能分支(
git checkout -b feature/amazing-feature
) - 提交你的更改(
git commit -m '添加一些惊人的功能'
) - 推送到分支(
git push origin feature/amazing-feature
) - 打开一个 Pull Request
请确保你的代码保持 100% 的测试覆盖率,并通过所有现有测试。
版权协议
naming-style 采用 Apache 2.0 许可证。详细信息请查阅 LICENSE 文件。