数组在任何类型的交互中返回 [object Object]，如果从类返回，为什么？

Question

简介

我目前正在尝试了解水疗中心通常如何工作、路由器、状态、路线等， 我已经完成了一个基本的哈希路由器，并且可以在片段元素上显示，现在尝试引入一个自定义的类似组件的反应，但是到达了占位符 {{ }} 替换，我已经被一个错误困扰了好几天，甚至即使我找到了解决办法，仍然没有开始理解。似乎如果从类构造函数中返回，我无法使用 [...].join("") 或 [...][1] 而不将其解释为 [object Object]

代码以及它是如何发生的

为了不干扰嵌套组件，我通过组件的子节点选择了 DFS 并将解析委托给子类，具体的条件处理是：

      if (current && current?.getAttribute) {
          current.innerHTML = new _Fo_Component_PlaceholderParser({ node: current, content: current.innerHTML })
      }

在 _Fo_Component_PlaceholderParser 中

class _Fo_Component_PlaceholderParser {

    constructor({ node, content }) {
         this.node = node;

         return this.placeholderParser(content);
    }

     placeholderParser(value) {
        if(value.trim === "") {
            return value
        }
        
        const parts = value.split(/(<\/?\w+[^>]*>)/g);

        const stack = [];
        let output = [];

        for (let part of parts) {
            const trimmedPart = part.trim();

            if (/^<\w+[^>]*>$/.test(trimmedPart)) {
                stack.push(trimmedPart);
                const processedTag =
                    stack.length === 1
                        ? trimmedPart.replace(/\{\{.*?\}\}/g, "testing")
                        : trimmedPart;

                output.push(String(processedTag));

                if (this.isSelfClosing(trimmedPart)) {
                    stack.pop();
                }
            } else if (/^<\/\w+>$/.test(trimmedPart)) {
                stack.pop();
                output.push(String(trimmedPart));
            } else if (/\{\{.*?\}\}/.test(trimmedPart) && stack.length === 0) {
                output.push(String(trimmedPart.replace(/\{\{.*?\}\}/g, "testing")));
            } else if (trimmedPart.length > 0) {
                output.push(String(trimmedPart));
            }
        }

        return output.join("");
    }

//rest of the method ...
}

要找到我的问题出现的地方，它在

_Fo_Component_PlaceholderParser

中。这个类直接返回

this.placeholderParser()

，它本身返回

output.join("")

。

除了在 DOM 上，

output.join("")

表示

[object Object]

，即使在过程中记录时， 它包含应该返回的解析数据。

为了证明，如果我简单地返回

output

，它会完美地显示为 DOM 中的数组，以逗号分隔。

所以

output.join("")

应该不是问题，对吧？
而且，这不仅仅是

.join

。
如果我尝试

output[0]

，它也会显示

[object Object]

，因此手动用

output

构建字符串是行不通的——它只会返回

[object Object] [object Object] [object Object]...

。

甚至不认为我的逻辑与此有任何关系 - 我将其删除并用

output

替换

["test", "it works"]

。
即使我对数组没有做任何事情，它也做了完全相同的事情。这些值被硬编码并直接返回，但其行为方式相同。只是为什么？

这里发生了什么事？

只有当我直接返回

output

并从我的DFS条件进行连接时，它才有效：

if (current && current?.getAttribute) {
    current.innerHTML = new _Fo_Component_PlaceholderParser({ node: current, content: current.innerHTML }).join("")
}

我需要什么帮助

1. 为什么从类返回时，output.join("")会在DOM中返回[object Object]？
2. 这与 JavaScript 如何处理类构造函数的返回值有关吗？
3. 解决此问题的正确方法是什么？

Answer 1

问题的出现是因为无论构造函数返回什么，

new SomeClass

总是返回一个对象

尝试以下操作：

class _Fo_Component_PlaceholderParser {

    constructor({ node, content }) {
        this.node = node;
        this.content = content;
    }
    toString() {
        return this.placeholderParser(this.content);
    }
    // ... the rest is unchanged