JavaScript 手寫 MyString 建構器實作 String 方法與屬性

需求

在無內建 String 建構器的環境下，自訂 MyString 實作以下功能：

var s = new MyString("hello");
s.length;       // 5
s[0];           // "h"
s.toString();   // "hello"
s.charAt(1);    // "e"
s.charAt("e");  // "h"  // 特殊需求：傳入字元回傳索引？
s.slice(0,-1);  // "hell"
s.split("e");   // ["h","llo"]
s.reverse();    // "olleh"

核心思路：以陣列包裝字元序列

JavaScript 陣列本身是物件，可動態添加屬性與方法。利用 for...in 遍歷字串建立字元陣列，再擴充該陣列實例的方法。

完整實作

var MyString = function(str) {
    // 1. 建立字元陣列
    var list = [];
    for (var c in str) {
        list.push(str[c]); // 或 c 為索引時用 str[c]
    }
    
    // 2. 覆寫 toString
    list.toString = function() {
        return this.join('');
    };
    
    // 3. 實作 charAt：支援索引與字元雙模式
    list.charAt = function(index) {
        if (typeof index === 'number') {
            return this[index] || '';
        } else if (typeof index === 'string' && index.length === 1) {
            // 特殊需求：傳入字元回傳第一個索引
            for (var i = 0; i < this.length; i++) {
                if (this[i] === index) return i;
            }
            return -1;
        }
        return '';
    };
    
    // 4. 實作 slice
    list.slice = function(start, end) {
        return this.slice(start, end).join(''); // 遞迴調用陣列 slice
    };
    
    // 5. 實作 split
    list.split = function(sep) {
        return this.join('').split(sep);
    };
    
    // 6. 實作 reverse
    list.reverse = function() {
        return this.slice().reverse().join(''); // 複製後反轉
    };
    
    // 7. length 屬性陣列原生擁有
    // 8. 索引存取 list[0] 陣列原生支援
    
    return list;
};

關鍵點解析

• for...in 遍歷字串：可迭代物件通用，不依賴 .length。
• 陣列即物件：直接在陣列實例上掛載方法，滿足 s[0]、s.length 原生行為。
• 方法回傳字串：內部以 join('') 將字元陣列合併為字串。

測試驗證

var s = new MyString("hello");
console.log(s.length);      // 5
console.log(s[0]);          // "h"
console.log(s.toString());  // "hello"
console.log(s.charAt(1));   // "e"
console.log(s.charAt("e")); // 1 (索引)
console.log(s.slice(0,-1)); // "hell"
console.log(s.split("e"));  // ["h","llo"]
console.log(s.reverse());   // "olleh"