在這邊進行字串轉換成某種編碼方式的字，這邊以 URI 和 ASCII 為範例。

不過仍與昨日發生相同問題，也就是第一個字讀不到。這問題之後再解，現在先初步建立我們的 React。

字串

字串在程式中是個很常見的狀態，而文字的儲存與處理就需要依賴各種文字編碼，這邊進行常見的文字編碼方式，包含：URI、ASCII等等

URI 編碼

使用 URI 編碼很簡單，只要使用encodeURIComponent()就可以了。然而轉換成URI還有別的方式，像是encodeURI()，但是差別在於encodeURIComponent()可以轉換較多的符號，相關資訊可以參考：《encodeURIComponent()》。

所以在這邊建立一個功能，直接把原始字串進行轉換：

const Change2Uri = () => {
  //encodeURI: 某些符號無法處理
  //encodeURIComponent: 比encodeURI 好
  setUri(encodeURIComponent(sourceStr));
};

ASCII 編碼

而 ASCII 編碼這邊不多說，詳細可以參考維基百科《ASCII》。在實作上，必須把每個字串直接進行轉換，所以這邊就使用for 迴圈，讓每個字個別轉換，然後再用參數逐一記錄下來：

  const Change2Ascii= () => {    
    let r = "";
    for(var i=0 ; i < sourceStr.length; i++){
        r+= sourceStr.charCodeAt(i)+" ";
        console.log(r);
    }      

    setAsciiCode(r);
  };

程式碼

最後完成的程式碼如下：

import { useState } from "react";

function StrCodeChange() {
    let [sourceStr, setSourceStr] = useState(0);
    let [uri, setUri] = useState(0);
    let [asciiCode, setAsciiCode] = useState(0);

    const handleChange = (e)=>{
        setSourceStr(e.target.value);
        Change2Uri();
        Change2Ascii();
    }

  const Change2Uri = () => {
    //encodeURI: 某些符號無法處理
    //encodeURIComponent: 比encodeURI 好
    setUri(encodeURIComponent(sourceStr));
    console.log("uri:" + uri);
  };

  const Change2Ascii= () => {    
    let r = "";
    for(var i=0 ; i < sourceStr.length; i++){
        r+= sourceStr.charCodeAt(i)+" ";
        console.log(r);
    }      

    setAsciiCode(r);
    console.log("ASCII:" + asciiCode);
  };

  return (
    <div>
      <h1>編碼換算</h1>
      <div>
        <label>輸入字串：</label>        
          <input itemType="text" onChange={handleChange}></input>
      </div>
      <div>
        <label>URI code:</label>
        <label>{uri}</label>
      </div>
      <div>
        <label>ASCII :</label>
        <label>{asciiCode}</label>
      </div>
    </div>
  );
}

export default StrCodeChange;

在輸入的地方使用onChange，所以每次輸入值時，會呼叫handleChange進行字串轉化。

不過仍然與昨天有同樣問題，就是第一個字不會被讀取到，只會從第二個字開始，因此無法全部的轉換。

參考資料

• 維基百科《ASCII》
• 《encodeURIComponent()》

後記

這邊完成了字的轉換，但是在Textbox中發生一樣無法讀到第一個字的問題。這個問題目前還沒有解，待之後處理吧。