學習資源

如何不使用 JavaScript 的 toUpperCase 跟 toLowerCase 轉換大小寫!

前陣子只要一有時間我就會上 leetcode 去看看有哪些有去的演算法題目可以去參考然後練習讓腦子稍微運轉一下,然後就看到有一題的題目是這樣的

您的👍是我們的動力來源!


Implement function ToLowerCase() that has a string
parameter str, and returns the same string in lowercase.

他意思就是說要你實作一個類似 ToLowerCase () 這個方法,聽好!是實作一個類似 ToLowerCase ()的方法不是使用 ToLowerCase () 這個 Api

好啦!當我第一次看到這個題目的時候我當下傻住了,到底要怎麼不透過javascript的api去實作大小寫的轉換……後來就跳下一題。

後來有一天我在查資料的時候無意間看到一個關鍵字叫 Unicode,馬上查了相關資料後就回去翻這個題目,就馬上實作出來了。
以下資料擷取維基百科

Unicode(中文:萬國碼、國際碼、統一碼、單一碼)是電腦科學領域裡的一項業界標準。它對世界上大部分的文字系統進行了整理、編碼,使得電腦可以用更為簡單的方式來呈現和處理文字。

Unicode伴隨著通用字元集的標準而發展,同時也以書本的形式[1]對外發表。Unicode至今仍在不斷增修,每個新版本都加入更多新的字元。目前最新的版本為2018年6月5日公布的11.0.0[2],已經收錄超過13萬個字元(第十萬個字元在2005年獲採納)。Unicode涵蓋的資料除了視覺上的字形、編碼方法、標準的字元編碼外,還包含了字元特性,如大小寫字母。

我們來認真看一下題目

https://leetcode.com/problems/to-lower-case/

很簡單吧XD 那我們開始動工吧!
我先把我的解法給貼出來,再來做細部的解釋!

/**
 * @param {string} str
 * @return {string}
 */
const toLowerCase = function(str) {
    let strarr = str.split("");
    let samtLetterArr = [];
    let samtLetter = "";
    strarr.forEach(el => {
        let unicode = el.charCodeAt(0);
        let letter = String.fromCharCode(unicode);
        if(unicode <= 90 && unicode >=65){
            letter = String.fromCharCode(unicode + 32);
        }
        samtLetterArr.push(letter);
    });
    samtLetter = samtLetterArr.join('');
    return samtLetter;
};

console.log(toLowerCase('Hello'));
console.log(toLowerCase('here'));
console.log(toLowerCase('LOVELY'));

首先我們要解這題的話有幾的東西要先知道

  1. Unicode字元列表
  2. JavaScript 的 Unicode字元轉換 api

Unicode字元列表

你可以看到每個拉丁字母都有一個對應的編號(紅色框起來的部分)

再來是JavaScript的部分

  1. charCodeAt() : 回傳指定位置的字串的 Unicode 編碼。
  2. fromCharCode() : 解析指定的 Unicode 編碼,然后回傳一個對應的字串

我們在看 JavaScript 轉 Unicode 編碼的結果要看後面兩位。例如:

"a".charCodeAt(0)        ->  97   //字串轉Unicode編碼 &#097;String.fromCharCode(97)  ->  "a"  //Unicode編碼轉換成字串;

然後我們仔細看大寫跟小寫的英文字母之間差了32的數字,也就是說我們要大小寫轉換只要先把字串轉成Unicode編碼後加減 32,然後轉換回字串就可以做到轉換大小寫的問題。
說到這邊聰明的你就知道怎麼做了吧XD 來看一下註解之後的版本

const toLowerCase = function(str) {
    let strarr = str.split("");       // 先把傳入的字串變成陣列
    let samtLetterArr = [];           // 轉換後的陣列
    let samtLetter = "";              // 最後回傳的字串
    
    // 跑回圈去轉換 
    strarr.forEach(el => {
        let unicode = el.charCodeAt(0);            // 一個個把字串轉成 Unicode
        let letter = String.fromCharCode(unicode); // 把 Unicode 轉回來字串,塞入 letter
        if(unicode <= 90 && unicode >=65){  // 但是如果 Unicode 是需要轉換的話
            letter = String.fromCharCode(unicode + 32); // 就把每個 Unicode 加 32 的間距,再塞回 letter
        }
        samtLetterArr.push(letter);         // 轉換後的字串塞回轉換後的陣列中
    });
  
    samtLetter = samtLetterArr.join('');    // 再將陣列給合併成字串,回塞給 samtLetter
    return samtLetter;               // 回傳最後的字串
};

這樣很簡單就可以實現不透過 javascript 的 toUpperCase 跟 toLowerCase 轉換大小寫!
在寫完之後跑 Leetcode 的 Submit ,獲得 Success 的結果,打完收工!

Leetcode上面的題目有些我也是看不是很懂,不過就先以看得懂的來練習看看,是蠻有趣的,多寫多看都可以學到不少技巧,雖然題目本身對於專案上面的應用可能不太實用,但是當中的解題技巧會對於code的寫作上面有不同的啟發,蠻推薦大家玩玩看!


作者【Mike Cheng 成智遠】
Youtube頻道 -  一些技術的分享與教學,從網頁設計、前端開發、遊戲製作、互動體驗等等... 每個月不定時週六或日晚上直播跟技術或是經驗相關的分享,有興趣的朋友歡迎追蹤訂閱+小鈴鐺 !
線上課程 — 現代 JavaScript 職人之路|入門篇 
線上課程 — 現代 JavaScript 職人之路|中階實戰篇  
線上課程 — 入門+實戰組合再送「面試篇」 
線上課程 — 職人必修的 RWD 網頁入門班 
線上課程 — JavaScript & TweenMax 動態特效速成實戰
線上課程 — 超越入門!Webpack 前端自動化開發
 本文經合作夥伴  Mike  授權轉載,原始文章連結
【歡迎追蹤訂閱】HiSKIO 嗨 程式技能」科技資訊文章、實用工具分享、新課程優惠領取
「Hi 直播學程式」不定期專題直播
「HiSKIO youtube頻道」免費實用課程、工程師經驗分享
最懂初學者的「F5學程式」
不想一個人孤單寫 code ? 來活力滿點的「程式丼起來」加入話圈吧 ! 
Facebook Comments