实现 汉字转拼音 工具

分类：general ｜ 标签：拼音、pinyin、汉字 汉字转拼音，支持声调/声母、姓名模式

2.1 功能说明

汉字转拼音，支持声调/声母、姓名模式

2.1.1 使用指南

功能说明

将汉字批量转换为拼音，支持带声调 / 无声调 / 数字声调、首字母、姓名模式（多音字按姓氏读音），并可对姓名列表按拼音排序。

使用场景

注音、排序、姓名首字母检索、中文注音排版。

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> 中定义的主要函数/方法：

• conv()
• copy()
• sortNames()

2.2.3 关键实现代码

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

import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { pinyin } from '@/vendor/pinyin-pro/index.js'
import ToolPageShell from '@/components/ToolPageShell.vue'

const tab = ref('conv')
const text = ref('')
const tone = ref('symbol')
const pattern = ref('pinyin')
const surname = ref(false)
const out = ref('')

const names = ref('')
const sorted = ref([])

function conv() {
  if (!text.value.trim()) { ElMessage.info('请输入中文'); return }
  out.value = pinyin(text.value, {
    toneType: tone.value,
    pattern: pattern.value,
    type: 'string',
    mode: surname.value ? 'surname' : 'normal',
    nonZh: 'consecutive'
  })
}
function copy(v) { if (v) navigator.clipboard?.writeText(v).then(() => ElMessage.success('已复制')) }

function sortNames() {
  const list = names.value.split(/\r?\n/).map(s => s.trim()).filter(Boolean)
  if (!list.length) { ElMessage.info('请输入姓名'); return }
  sorted.value = list
    .map(n => ({ name: n, py: pinyin(n, { toneType: 'none', pattern: 'pinyin', type: 'string' }) }))
    .sort((a, b) => a.py.localeCompare(b.py, 'zh'))
}

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/pinyin