pinyin-pro插件的使用---React

📕 简单介绍

 pinyin-pro是一个专业的 js 汉字拼音转换库，功能丰富、准确率高、性能优异。

🔨 安装插件

npm install pinyin-pro 或 yarn add pinyin-pro

❓ 参数介绍

        以下为常用的参数

参数	参数说明	参数类型	可选值
patter	获得数组和字符串不同的 返回格式	string	initial(返回声母) final(返回韵母) finalHead(韵头/韵腹/韵尾) num(音调) first(拼音首字母)
type	输出结果的类型	string	string(以字符串形式返回，空格分隔) array(以数组形式返回) all(获取完整内容：拼音、声母、韵母、首字母、拼音长度等)
separator	拼音之间的分隔符	string、number、boolean	根据偏好自定义
nonZh	非汉字字符的处理形式	string	spaced(非汉字在结果中空格隔开输出) consecutive(非汉字在结果中紧凑输出) removed(非汉字在结果中移除)

 

💡 基本使用

1、在项目中引用

import {pinyin} from 'pinyin-pro'

2、汉字转拼音

pinyin()方法中第一个参数就是要转换的值

export default function App() {

const [val,setVal]=useState('')
const [pinyin_Val,setPinYin]=useState('')

const changeVal=ev=>{
    setVal(ev.target.value)
    setPinYin(pinyin(ev.target.value))
  }

return (
    <div className='all'>

      <input type="text" value={val} onChange={(ev)=>{changeVal(ev)}} />
      <input type="text" value={pinyin_Val} />

    </div>
  )
}

3、汉字转拼音，只要首字母

只需要给pinyin方法设置第二个参数，对象形式，键为pattern，值为first 

export default function App() {

  const [val,setVal]=useState('')
  const [pinyin_Val,setPinYin]=useState('')

  const changeVal=ev=>{
    setVal(ev.target.value)
    setPinYin(pinyin(ev.target.value,{pattern:'first'}))
  }
  


  return (
    <div className='all'>
     
      <input type="text" value={val} onChange={(ev)=>{changeVal(ev)}} />
      <input type="text" value={pinyin_Val} />

    </div>
  )
}

4、如果你想要首字母大写，则使用toUpperCase()将转换结果变为大写

toneType:'none' 去除声调

export default function App() {

  const [val,setVal]=useState('')
  const [pinyin_Val,setPinYin]=useState('')

  const changeVal=ev=>{
    setVal(ev.target.value)
    setPinYin(pinyin(ev.target.value,{pattern:'first',toneType:'none'}).toUpperCase())
  }

  return (
    <div className='all'>
   
      <input type="text" value={val} onChange={(ev)=>{changeVal(ev)}} />
      <input type="text" value={pinyin_Val} />
      
    </div>
  )
}

5、自定义分隔符

只需添加separator参数即可

export default function App() {

  const [val,setVal]=useState('')
  const [pinyin_Val,setPinYin]=useState('')

  const changeVal=ev=>{
    setVal(ev.target.value)
    setPinYin(pinyin(ev.target.value,{pattern:'first',separator:'/'}))
  }

  return (
    <div className='all'>

      <input type="text" value={val} onChange={(ev)=>{changeVal(ev)}} />
      <input type="text" value={pinyin_Val/>
      
    </div>
  )
}

6、忽略字母和数字

设置nonZh为removed

export default function App() {

  const [val,setVal]=useState('')
  const [pinyin_Val,setPinYin]=useState('')

  const changeVal=ev=>{
    setVal(ev.target.value)
    setPinYin(pinyin(ev.target.value,{pattern:'first',nonZh:'removed'}))
  }

  return (
    <div className='all'>

      <input type="text" value={val} onChange={(ev)=>{changeVal(ev)}} />
      <input type="text" value={pinyin_Val/>
      
    </div>
  )
}

7、返回声母

pattern 为 initial 时，返回的结果将为拼音的声母

setPinYin(pinyin(ev.target.value,{pattern:'initial'}))

8、返回韵母

pattern 为 final 时，返回的结果将为拼音的声母

setPinYin(pinyin(ev.target.value,{pattern:'final'}))

9、字符匹配（match）

如果符合指定字母，会返回字符下标

import {pinyin,match} from 'pinyin-pro'

setPinYin(match(ev.target.value,'znttkx'))

10、精确匹配

需要每一个字符都匹配成功 ，匹配不成功返回null

setPinYin(match(ev.target.value,'zhunitiantiankaixin',{ precision: 'every' }))

以上是pinyin-pro插件的常用方法，更多方法请参阅官网

pinyin-prohttps://pinyin-pro.cn/use/pinyin.html