JavaScript链式调用方法：如何返回格式化字符串而非对象？

你已经搭好了链式调用的基础框架，但问题出在每个方法返回的是整个test对象，所以最终console.log输出的是对象本身，而非你想要的格式化字符串。下面是几种实用的解决方案，同时我也会修正代码里的小细节问题（比如未闭合的HTML标签）：

方案1：添加toString()方法自动返回结果 #

JavaScript中，当需要将对象转换为字符串时（比如console.log输出、模板字符串拼接场景），会自动调用对象的toString()方法。我们可以利用这个特性，给test对象添加该方法：

let test = {
  result: '',
  bolder: function (str = this.result) {
    // 修正标签闭合错误：原代码缺少结尾的>
    this.result = '<b>' + str + '</b>';
    // 用return this代替return test，提升对象复用性（比如后续复制对象时依然生效）
    return this;
  },
  italic: function (str = this.result) {
    // 同样修正标签闭合
    this.result = '<i>' + this.result + '</i>';
    return this;
  },
  // 添加toString方法，自动返回格式化后的结果
  toString() {
    return this.result;
  }
}

// 两种调用方式都能得到预期输出：
console.log( test.bolder('text').italic().toString() ); 
// 输出: "<i><b>text</b></i>"

// 或者利用toString自动触发的特性，用模板字符串包裹：
console.log( `${test.bolder('text').italic()}` );
// 同样输出正确字符串

方案2：添加明确的getResult()方法 #

如果你想要更清晰的语义，可以专门添加一个获取结果的方法，主动调用它来拿到格式化后的字符串：

let test = {
  result: '',
  bolder: function (str = this.result) {
    this.result = '<b>' + str + '</b>';
    return this;
  },
  italic: function (str = this.result) {
    this.result = '<i>' + this.result + '</i>';
    return this;
  },
  // 明确获取结果的方法，语义更直观
  getResult() {
    return this.result;
  }
}

console.log( test.bolder('text').italic().getResult() );
// 输出: "<i><b>text</b></i>"

关键细节说明 #

1. 修正标签闭合：原代码里的</b和</i都缺少了结尾的>，这会导致HTML标签不合法，我已经在示例中修正了这个问题。
2. 用this代替test：原来的方法返回test对象，改成return this后，对象的复用性更强（比如后续复制这个对象时，链式调用依然能正常工作）。
3. 链式调用的核心逻辑：链式调用的本质是每个方法返回当前对象，这样才能继续调用下一个方法。所以我们不能让bolder或italic直接返回字符串（否则后续无法继续链式调用），而是通过额外的方法或toString来获取最终结果。

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