Angular2 中用管道技术吧汉字转换为拼音

这篇博客介绍了如何在Angular2项目中使用管道技术将汉字转换为拼音。作者通过TypeScript重写了以前的Coffeescript代码,并详细说明了在模块中导入和在HTML中应用的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用 angular2 开发的项目中需要动态的把汉字转换为拼音,直接把自己以前写的一篇文章《coffeescript 汉字转拼音代码》中的内容拿过来用 TypeScript 重新写了一下,修改后的代码如下(文件名 pinyin.pipe.ts):

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'pinyin'
})
export class PinyinPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if (!value) {return ''; }
    if (+args === 1) { return value; }
    let py = '';
    for ( const c of value) {
      if (/[a-zA-Z0-9\- ]/.test(c)) {
        py += c;
      } else {
        py += this._findPinyin(c);
      }
    }
    py.replace('/ +/g', '-');
    return py;
  }
  _findPinyin(uchar) {
    const PinYin = {
      'a': '\u554a\u963f\u9515',
      'ai': `\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77ee\u827e
      \u788d\u7231\u9698\u8bf6\u6371\u55f3\u55cc\u5ad2\u7477\u66a7\u7839\u953f\u972d`,
      'an': '\u978d\u6c28\u5b89\u4ffa\u6309\u6697\u5cb8\u80fa\u6848\u8c19\u57ef\u63de\u72b4\u5eb5\u6849\u94f5\u9e4c\u9878\u9eef',
      'ang': '\u80ae\u6602\u76ce',
      'ao': `\u51f9\u6556\u71ac\u7ff1\u8884\u50b2\u5965\u61ca\u6fb3\u5773
      \u62d7\u55f7\u5662\u5c99\u5ed2\u9068\u5aaa\u9a9c\u8071\u87af\u93ca\u9ccc\u93d6`,
      'ba': `\u82ad\u634c\u6252\u53ed\u5427\u7b06\u516b\u75a4\u5df4\u62d4\u8dcb
      \u9776\u628a\u8019\u575d\u9738\u7f62\u7238\u8307\u83dd\u8406\u636d\u5c9c
      \u705e\u6777\u94af\u7c91\u9c85\u9b43`,
      'bai': '\u767d\u67cf\u767e\u6446\u4f70\u8d25\u62dc\u7a17\u859c\u63b0\u97b4',
      'ban': `\u6591\u73ed\u642c\u6273\u822c\u9881\u677f\u7248\u626e\u62cc\u4f34
      \u74e3\u534a\u529e\u7eca\u962a\u5742\u8c73\u94a3\u7622\u764d\u8228`,
      'bang': '\u90a6\u5e2e\u6886\u699c\u8180\u7ed1\u68d2\u78c5\u868c\u9551\u508d\u8c24\u84a1\u8783',
      'bao': `\u82de\u80de\u5305\u8912\u96f9\u4fdd\u5821\u9971\u5b9d\u62b1\u62a5
      \u66b4\u8c79\u9c8d\u7206\u52f9\u8446\u5b80\u5b62\u7172\u9e28\u8913\u8db5\u9f85`,
      'bo': `\u5265\u8584\u73bb\u83e0\u64ad\u62e8\u94b5\u6ce2\u535a\u52c3
      \u640f\u94c2\u7b94\u4f2f\u5e1b\u8236\u8116\u818a\u6e24\u6cca\u9a73
      \u4eb3\u8543\u5575\u997d\u6a97\u64d8\u7934\u94b9\u9e41\u7c38\u8ddb`,
      'bei': `\u676f\u7891\u60b2\u5351\u5317\u8f88\u80cc\u8d1d\u94a1\u500d
      \u72c8\u5907\u60eb\u7119\u88ab\u5b5b\u9642\u90b6\u57e4\u84d3\u5457\u602b\u6096\u789a\u9e4e\u8919\u943e`,
      'ben': '\u5954\u82ef\u672c\u7b28\u755a\u574c\u951b',
      'beng': '\u5d29\u7ef7\u752d\u6cf5\u8e66\u8ff8\u552a\u5623\u750f',
      'bi': `\u903c\u9f3b\u6bd4\u9119\u7b14\u5f7c\u78a7\u84d6\u853d\u6bd5
      \u6bd9\u6bd6\u5e01\u5e87\u75f9\u95ed\u655d\u5f0a\u5fc5\u8f9f\u58c1
      \u81c2\u907f\u965b\u5315\u4ef3\u4ffe\u8298\u835c\u8378\u5421\u54d4
      \u72f4\u5eb3\u610e\u6ed7\u6fde\u5f3c\u59a3\u5a62\u5b16\u74a7\u8d32
      \u7540\u94cb\u79d5\u88e8\u7b5a\u7b85\u7be6\u822d\u895e\u8df8\u9ac0`,
      'bia': '\u9adf',
      'bian': `\u97ad\u8fb9\u7f16\u8d2c\u6241\u4fbf\u53d8\u535e\u8fa8
      \u8fa9\u8fab\u904d\u533e\u5f01\u82c4\u5fed\u6c74\u7f0f\u7178\u782d
      \u78a5\u7a39\u7a86\u8759\u7b3e\u9cca`,
      'biao': '\u6807\u5f6a\u8198\u8868\u5a4a\u9aa0\u98d1\u98d9\u98da\u706c\u9556\u9573\u762d\u88f1\u9cd4',
      'bie': '\u9cd6\u618b\u522b\u5225\u762a\u8e69\u9cd8',
      'bin': '\u5f6c\u658c\u6fd2\u6ee8\u5bbe\u6448\u50a7\u6d5c\u7f24\u73a2\u6ba1\u8191\u9554\u9acc\u9b13',
      'bing': '\u5175\u51b0\u67c4\u4e19\u79c9\u997c\u70b3\u75c5\u5e76\u7980\u90b4\u6452\u7ee0\u678b\u69df\u71f9',
      'bu': '\u6355\u535c\u54fa\u8865\u57e0\u4e0d\u5e03\u6b65\u7c3f\u90e8\u6016\u62ca\u535f\u900b\u74ff\u6661\u949a\u91ad',
      'ca': '\u64e6\u5693\u7924',
      'cai': '\u731c\u88c1\u6750\u624d\u8d22\u776c\u8e29\u91c7\u5f69\u83dc\u8521',
      'can': '\u9910\u53c2\u8695\u6b8b\u60ed\u60e8\u707f\u9a96\u74a8\u7cb2\u9eea',
      'cang': '\u82cd\u8231\u4ed3\u6ca7\u85cf\u4f27',
      'cao': '\u64cd\u7cd9\u69fd\u66f9\u8349\u8279\u5608\u6f15\u87ac\u825a',
      'ce': '\u5395\u7b56\u4fa7\u518c\u6d4b\u5202\u5e3b\u607b',
      'cen': '\u5c91\u6d94',
      'ceng': '\u5c42\u8e6d\u564c',
      'cha': `\u63d2\u53c9\u832c\u8336\u67e5\u78b4\u643d\u5bdf\u5c94
      \u5dee\u8be7\u7339\u9987\u6c4a\u59f9\u6748\u6942\u69ce\u6aab\u9497\u9538\u9572\u8869`,
      'chai': '\u62c6\u67f4\u8c7a\u4faa\u8308\u7625\u867f\u9f87',
      'chan': `\u6400\u63ba\u8749\u998b\u8c17\u7f20\u94f2\u4ea7\u9610
      \u98a4\u5181\u8c04\u8c36\u8487\u5edb\u5fcf\u6f7a\u6fb6\u5b71
      \u7fbc\u5a75\u5b17\u9aa3\u89c7\u7985\u9561\u88e3\u87fe\u8e94`,
      'chang': `\u660c\u7316\u573a\u5c1d\u5e38\u957f\u507f\u80a0\u5382
      \u655e\u7545\u5531\u5021\u4f25\u9b2f\u82cc\u83d6\u5f9c\u6005\u60dd
      \u960a\u5a3c\u5ae6\u6636\u6c05\u9cb3`,
      'chao': '\u8d85\u6284\u949e\u671d\u5632\u6f6e\u5de2\u5435\u7092\u600a\u7ec9\u6641\u8016',
      'che': '\u8f66\u626f\u64a4\u63a3\u5f7b\u6f88\u577c\u5c6e\u7817',
      'chen': `\u90f4\u81e3\u8fb0\u5c18\u6668\u5ff1\u6c89\u9648\u8d81
      \u886c\u79f0\u8c0c\u62bb\u55d4\u5bb8\u741b\u6987\u809c\u80c2\u789c\u9f80`,
      'cheng': `\u6491\u57ce\u6a59\u6210\u5448\u4e58\u7a0b\u60e9\u6f84
      \u8bda\u627f\u901e\u9a8b\u79e4\u57d5\u5d4a\u5fb5\u6d48\u67a8\u67fd
      \u6a18\u665f\u584d\u77a0\u94d6\u88ce\u86cf\u9172`,
      'chi': `\u5403\u75f4\u6301\u5319\u6c60\u8fdf\u5f1b\u9a70\u803b
      \u9f7f\u4f88\u5c3a\u8d64\u7fc5\u65a5\u70bd\u50ba\u5880\u82aa\u830c
      \u640b\u53f1\u54e7\u557b\u55e4\u5f73\u996c\u6cb2\u5ab8\u6555\u80dd
      \u7719\u7735\u9e31\u761b\u892b\u86a9\u87ad\u7b1e\u7bea\u8c49\u8e05\u8e1f\u9b51`,
      'cou': '\u85ae\u6971\u8f8f\u8160',
      'chong': '\u5145\u51b2\u866b\u5d07\u5ba0\u833a\u5fe1\u61a7\u94f3\u825f',
      'chou': `\u62bd\u916c\u7574\u8e0c\u7a20\u6101\u7b79\u4ec7\u7ef8\u7785\u4e11
      \u4fe6\u5733\u5e31\u60c6\u6eb4\u59af\u7633\u96e0\u9c8b`,
      'chu': `\u81ed\u521d\u51fa\u6a71\u53a8\u8e87\u9504\u96cf\u6ec1
      \u9664\u695a\u7840\u50a8\u77d7\u6410\u89e6\u5904\u4e8d\u520d\u61b7
      \u7ecc\u6775\u696e\u6a17\u870d\u8e70\u9edc`,
      'chuai': '\u562c\u81aa\u8e39',
      'chuan': '\u63e3\u5ddd\u7a7f\u693d\u4f20\u8239\u5598\u4e32\u63be\u821b\u60f4\u9044\u5ddb\u6c1a\u948f\u9569\u8221',
      'chuang': '\u75ae\u7a97\u5e62\u5e8a\u95ef\u521b\u6006',
      'chui': '\u5439\u708a\u6376\u9524\u5782\u9672\u68f0\u69cc',
      'chun': '\u6625\u693f\u9187\u5507\u6df3\u7eaf\u8822\u4fc3\u83bc\u6c8c\u80ab\u6710\u9e51\u877d',
      'chuo': '\u6233\u7ef0\u851f\u8fb6\u8f8d\u955e\u8e14\u9f8a',
      'ci': '\u75b5\u8328\u78c1\u96cc\u8f9e\u6148\u74f7\u8bcd\u6b64\u523a\u8d50\u6b21\u8360\u5472\u5d6f\u9e5a\u8785\u7ccd\u8d91',
      'cong': '\u806a\u8471\u56f1\u5306\u4ece\u4e1b\u506c\u82c1\u6dd9\u9aa2\u742e\u7481\u679e',
      'cu': '\u51d1\u7c97\u918b\u7c07\u731d\u6b82\u8e59',
      'cuan': '\u8e7f\u7be1\u7a9c\u6c46\u64ba\u6615\u7228',
      'cui': '\u6467\u5d14\u50ac\u8106\u7601\u7cb9\u6dec\u7fe0\u8403\u60b4\u7480\u69b1\u96b9',
      'cun': '\u6751\u5b58\u5bf8\u78cb\u5fd6\u76b4',
      'cuo': '\u64ae\u6413\u63aa\u632b\u9519\u539d\u811e\u9509\u77ec\u75e4\u9e7e\u8e49\u8e9c',
      'da': '\u642d\u8fbe\u7b54\u7629\u6253\u5927\u8037\u54d2\u55d2\u601b\u59b2\u75b8\u8921\u7b2a\u977c\u9791',
      'dai': `\u5446\u6b79\u50a3\u6234\u5e26\u6b86\u4ee3\u8d37\u888b\u5f85
      \u902e\u6020\u57ed\u7519\u5454\u5cb1\u8fe8\u902f\u9a80\u7ed0\u73b3\u9edb`,
      'dan': `\u803d\u62c5\u4e39\u5355\u90f8\u63b8\u80c6\u65e6\u6c2e\u4f46
      \u60ee\u6de1\u8bde\u5f39\u86cb\u4ebb\u510b\u5369\u840f\u5556\u6fb9
      \u6a90\u6b9a\u8d55\u7708\u7605\u8043\u7baa`,
      'dang': '\u5f53\u6321\u515a\u8361\u6863\u8c20\u51fc\u83ea\u5b95\u7800\u94db\u88c6',
      'dao': `\u5200\u6363\u8e48\u5012\u5c9b\u7977\u5bfc\u5230\u7a3b
      \u60bc\u9053\u76d7\u53e8\u5541\u5fc9\u6d2e\u6c18\u7118\u5fd1\u7e9b`,
      'de': '\u5fb7\u5f97\u7684\u951d', 'deng': '\u8e6c\u706f\u767b\u7b49\u77aa\u51f3\u9093\u5654\u5d9d\u6225\u78f4\u956b\u7c26',
      'di': `\u5824\u4f4e\u6ef4\u8fea\u654c\u7b1b\u72c4\u6da4\u7fdf
      \u5ae1\u62b5\u5e95\u5730\u8482\u7b2c\u5e1d\u5f1f\u9012\u7f14
      \u6c10\u7c74\u8bcb\u8c1b\u90b8\u577b\u839c\u837b\u5600\u5a23
      \u67e2\u68e3\u89cc\u7825\u78b2\u7747\u955d\u7f9d\u9ab6`,
      'dia': '\u55f2',
      'dian': `\u98a0\u6382\u6ec7\u7898\u70b9\u5178\u975b\u57ab\u7535
      \u4f43\u7538\u5e97\u60e6\u5960\u6dc0\u6bbf\u4e36\u963d\u576b
      \u57dd\u5dc5\u73b7\u765c\u766b\u7c1f\u8e2e`,
      'diao': '\u7889\u53fc\u96d5\u51cb\u5201\u6389\u540a\u9493\u8c03\u8f7a\u94de\u8729\u7c9c\u8c82',
      'die': `\u8dcc\u7239\u789f\u8776\u8fed\u8c0d\u53e0\u4f5a\u57a4\u581e
      \u63f2\u558b\u6e2b\u8f76\u7252\u74de\u8936\u800b\u8e40\u9cbd\u9cce`,
      'ding': `\u4e01\u76ef\u53ee\u9489\u9876\u9f0e\u952d\u5b9a\u8ba2
      \u4e22\u4ec3\u5576\u738e\u815a\u7887\u753a\u94e4\u7594\u8035\u914a`,
      'diu': '\u94e5',
      'dong': `\u4e1c\u51ac\u8463\u61c2\u52a8\u680b\u4f97\u606b\u51bb
      \u6d1e\u578c\u549a\u5cbd\u5cd2\u5902\u6c21\u80e8\u80f4\u7850\u9e2b`,
      'dou': '\u515c\u6296\u6597\u9661\u8c46\u9017\u75d8\u8538\u94ad\u7aa6\u7aac\u86aa\u7bfc\u9161',
      'du': `\u90fd\u7763\u6bd2\u728a\u72ec\u8bfb\u5835\u7779\u8d4c
      \u675c\u9540\u809a\u5ea6\u6e21\u5992\u828f\u561f\u6e0e\u691f
      \u6a50\u724d\u8839\u7b03\u9ad1\u9ee9`,
      'duan': '\u7aef\u77ed\u953b\u6bb5\u65ad\u7f0e\u5f56\u6934\u7145\u7c16',
      'dui': '\u5806\u5151\u961f\u5bf9\u603c\u619d\u7893',
      'dun': '\u58a9\u5428\u8e72\u6566\u987f\u56e4\u949d\u76fe\u9041\u7096\u7818\u7905\u76f9\u9566\u8db8',
      'duo': '\u6387\u54c6\u591a\u593a\u579b\u8eb2\u6735\u8dfa\u8235\u5241\u60f0\u5815\u5484\u54da\u7f0d\u67c1\u94ce\u88f0\u8e31',
      'e': `\u86fe\u5ce8\u9e45\u4fc4\u989d\u8bb9\u5a25\u6076\u5384
      \u627c\u904f\u9102\u997f\u5669\u8c14\u57a9\u57ad\u82ca\u83aa
      \u843c\u5443\u6115\u5c59\u5a40\u8f6d\u66f7\u816d\u786a\u9507
      \u9537\u9e57\u989a\u9cc4`,
      'en': '\u6069\u84bd\u6441\u5514\u55ef',
      'er': '\u800c\u513f\u8033\u5c14\u9975\u6d31\u4e8c\u8d30\u8fe9\u73e5\u94d2\u9e38\u9c95',
      'fa': '\u53d1\u7f5a\u7b4f\u4f10\u4e4f\u9600\u6cd5\u73d0\u57a1\u781d',
      'fan': `\u85e9\u5e06\u756a\u7ffb\u6a0a\u77fe\u9492\u7e41\u51e1
      \u70e6\u53cd\u8fd4\u8303\u8d29\u72af\u996d\u6cdb\u8629\u5e61
      \u72ad\u68b5\u6535\u71d4\u7548\u8e6f`,
      'fang': '\u574a\u82b3\u65b9\u80aa\u623f\u9632\u59a8\u4eff\u8bbf\u7eba\u653e\u531a\u90a1\u5f77\u9
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值