如何在React JS中以函数形式使用科隆音形码算法

一、重构算法为纯函数 #

原代码是挂载在String.prototype上的方法，我们将其重构为独立纯函数，避免污染全局原型，更适配React的开发风格：

function colophonetics(word) {
  const substitution = {'ä': 'a', 'ö': 'o', 'ü': 'u', 'ß': 'ss', 'ph': 'f'}
  const exceptions_leading = {
    4: ["ca","ch","ck","cl","co","cq","cu","cx"],
    8: ["dc","ds","dz","tc","ts","tz"]
  };
  const exceptions_following = ["sc","zc","cx","kx","qx"];
  const coding_table = {
    0:  "aeijouy",
    1:  "bp",
    2:  "dt",
    3:  "fvw",
    4:  "cgkq",
    48: "x",
    5:  "l",
    6:  "mn",
    7:  "r",
    8:  "csz"
  };

  // 辅助函数：检查数组是否包含目标元素
  function contains(arr, element) {
    for (let i = 0; i < arr.length; ++i) {
      if (arr[i] === element) {
        return true;
      }
    }
    return false;
  }

  // 处理多单词输入（按空格拆分）
  if (typeof word === 'string' && word.indexOf(' ') !== -1) {
    word = word.split(' ');
  }

  // 递归处理数组中的每个单词
  if (Array.isArray(word)) {
    return word.map(item => colophonetics(item)).join(' ');
  }

  // 非字符串输入返回空值
  if (typeof word !== 'string') {
    return '';
  }

  // 预处理：转小写并替换特殊字符
  let processedWord = word.toLowerCase();
  for (const s in substitution) {
    processedWord = processedWord.replace(new RegExp(s, "g"), substitution[s]);
  }

  const value = [];
  const length = processedWord.length;

  // 逐个字符生成编码
  for (let i = 0; i < length; i++) {
    const l = processedWord.substr(i, 1);
    value[i] = '';

    // 处理开头为"cr"的特殊情况
    if (i === 0 && length > 1 && processedWord[i] + processedWord[i+1] === 'cr') {
      value[i] = 4;
    }

    // 处理开头的双字符例外规则
    for (const code in exceptions_leading) {
      if (i < length - 1 && contains(exceptions_leading[code], processedWord[i] + processedWord[i+1])) {
        value[i] = parseInt(code);
      }
    }

    // 处理后续位置的双字符例外规则
    if (i !== 0 && contains(exceptions_following, processedWord[i-1] + processedWord[i])) {
      value[i] = 8;
    }

    // 匹配基础编码表
    if (value[i] === '') {
      for (const code in coding_table) {
        if (coding_table[code].indexOf(l) !== -1) {
          value[i] = parseInt(code);
          break;
        }
      }
    }
  }

  // 去重相邻重复编码、移除0值编码
  for (let i = 1; i < length; i++) {
    if (value[i] === value[i-1]) {
      value[i] = "";
    }
    if (value[i] === 0) {
      value[i] = "";
    }
  }

  return value.join('');
}

二、在React组件中直接使用 #

创建一个简单的函数组件，通过useState管理输入和编码结果：

import React, { useState } from 'react';

// 导入上面的colophonetics函数，或者直接写在组件文件内

function KolnerPhoneticConverter() {
  const [inputText, setInputText] = useState("Rønne Ronne Ranne Runne Ramme");
  const [phoneticResult, setPhoneticResult] = useState(colophonetics(inputText));

  const handleInputChange = (e) => {
    const newText = e.target.value;
    setInputText(newText);
    setPhoneticResult(colophonetics(newText));
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h2>科隆音形码转换器</h2>
      <textarea
        value={inputText}
        onChange={handleInputChange}
        rows={4}
        style={{ width: '100%', padding: '10px', fontSize: '16px' }}
        placeholder="输入需要转换的文本..."
      />
      <div style={{ marginTop: '15px' }}>
        <strong>转换结果：</strong>
        <span style={{ marginLeft: '10px', fontSize: '18px' }}>{phoneticResult}</span>
      </div>
    </div>
  );
}

export default KolnerPhoneticConverter;

三、封装为自定义Hook（复用场景） #

如果多个组件需要使用科隆音形码功能，可以将状态逻辑封装为自定义Hook，方便复用：

import { useState, useCallback } from 'react';
import { colophonetics } from './path-to-your-function'; // 导入纯函数

function useKolnerPhonetic(initialText = '') {
  const [inputText, setInputText] = useState(initialText);
  const [phoneticCode, setPhoneticCode] = useState(colophonetics(initialText));

  // 使用useCallback缓存更新函数，避免不必要的重渲染
  const updateInput = useCallback((text) => {
    setInputText(text);
    setPhoneticCode(colophonetics(text));
  }, []);

  return {
    inputText,
    phoneticCode,
    updateInput
  };
}

// 使用自定义Hook的示例组件
function ReusableConverter() {
  const { inputText, phoneticCode, updateInput } = useKolnerPhonetic("Rønne Ronne Ranne Runne Ramme");

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h2>复用版科隆音形码转换器</h2>
      <input
        type="text"
        value={inputText}
        onChange={(e) => updateInput(e.target.value)}
        style={{ width: '100%', padding: '10px', fontSize: '16px', marginBottom: '15px' }}
        placeholder="输入文本..."
      />
      <p>
        <strong>编码结果：</strong> {phoneticCode}
      </p>
    </div>
  );
}

export default ReusableConverter;

内容的提问来源于stack exchange，提问作者valton