直接从类中获取类名
以前的答案解释说someClassInstance.constructor.name
工作得很好,但是如果您需要以编程方式将类名转换为字符串并且不想为此创建实例,请记住:
typeof YourClass === "function"
而且,由于每个函数都有一个name
属性,另一种使用类名获取字符串的好方法是:
YourClass.name
下面是一个很好的例子,说明为什么这很有用。
加载 Web 组件
正如MDN 文档告诉我们的那样,这是加载 Web 组件的方式:
customElements.define("your-component", YourComponent);
从哪里YourComponent
扩展的类HTMLElement
。由于在组件标签本身之后命名组件的类被认为是一种很好的做法,因此最好编写一个辅助函数,您的所有组件都可以使用它来注册自己。所以这是那个函数:
function registerComponent(componentClass) {
const componentName = upperCamelCaseToSnakeCase(componentClass.name);
customElements.define(componentName, componentClass);
}
所以你需要做的就是:
registerComponent(YourComponent);
这很好,因为它比自己编写组件标签更不容易出错。总结一下,这是upperCamelCaseToSnakeCase()
函数:
// converts `YourString` into `your-string`
function upperCamelCaseToSnakeCase(value) {
return value
// first char to lower case
.replace(/^([A-Z])/, $1 => $1.toLowerCase())
// following upper chars get preceded with a dash
.replace(/([A-Z])/g, $1 => "-" + $1.toLowerCase());
}