实现 大小写转换 工具

分类：general ｜ 标签：大小写、驼峰、命名、转换 大写 / 小写 / 首字母大写 / 驼峰 / 蛇形命名互转

2.1 功能说明

大写 / 小写 / 首字母大写 / 驼峰 / 蛇形命名互转

2.1.1 使用指南

大小写转换使用指南

支持的转换

• 大写 / 小写：整体转换。
• 首字母大写：每个单词首字母大写（适合标题）。
• 驼峰 camelCase：首词小写，其后每个词首字母大写。
• 帕斯卡 PascalCase：每个词首字母大写。
• 蛇形 snake_case / 短横线 kebab-case：小写词用 _ 或 - 连接。
• 反转大小写：大小写互换。

典型场景

变量命名规范统一、SQL 关键字大写、文件名/URL slug 生成。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• words()
• capitalize()
• apply()
• clearAll()
• copy()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import ToolPageShell from '@/components/ToolPageShell.vue'

const input = ref('')
const output = ref('')

const transforms = [
  { key: 'upper', label: '大写' },
  { key: 'lower', label: '小写' },
  { key: 'title', label: '首字母大写' },
  { key: 'camel', label: '驼峰' },
  { key: 'pascal', label: '帕斯卡' },
  { key: 'snake', label: '蛇形' },
  { key: 'kebab', label: '短横线' },
  { key: 'invert', label: '反转大小写' }
]

function words(str) {
  return str.match(/[A-Za-z0-9]+/g) || []
}
function capitalize(w) {
  return w.charAt(0).toUpperCase() + w.slice(1)
}

function apply(key) {
  const s = input.value
  if (!s) { output.value = ''; return }
  let r = ''
  switch (key) {
    case 'upper': r = s.toUpperCase(); break
    case 'lower': r = s.toLowerCase(); break
    case 'title':
      r = s.replace(/[A-Za-z0-9]+/g, w => capitalize(w.toLowerCase()))
      // 标题场景按空格保留原结构较复杂，简单对词处理
      r = s.split(/(\s+)/).map(seg => /[A-Za-z0-9]/.test(seg) ? capitalize(seg.toLowerCase()) : seg).join('')
      break
    case 'camel':
      r = words(s).map((w, i) => i === 0 ? w.toLowerCase() : capitalize(w.toLowerCase())).join('')
      break
    case 'pascal':
      r = words(s).map(w => capitalize(w.toLowerCase())).join('')
      break
    case 'snake':
      r = words(s).map(w => w.toLowerCase()).join('_')
      break
    case 'kebab':
      r = words(s).map(w => w.toLowerCase()).join('-')
      break
    case 'invert':
      r = [...s].map(c => c === c.toLowerCase() ? c.toUpperCase() : c.toLowerCase()).join('')
      break
  }
  output.value = r
}

function clearAll() {
  input.value = ''
  output.value = ''
}

async function copy(text) {
  if (!text) return
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('已复制')
  } catch {
    ElMessage.warning('复制失败，请手动复制')
  }
}

2.3 效果截图

暂未生成该工具的效果截图。

工具访问地址：https://www.i91tools.com/tools/case-converter