跳至主要内容

限制模板表达式

强制模板字面量表达式为string类型。

✅

在"plugin:@typescript-eslint/recommended-type-checked"中扩展ESLint 配置将启用此规则。

💭

此规则需要类型信息才能运行。

JavaScript 在字符串上下文中会自动将对象转换为字符串，例如使用+与字符串连接或使用${}将其嵌入模板字面量中。对象的默认toString()方法使用格式"[object Object]"，这通常不是预期的结果。此规则报告在模板字面量字符串中使用的非字符串值，可以选择允许提供有用字符串化结果的其他数据类型。

注意

此规则的默认设置有意不允许使用具有自定义toString()方法的对象在模板字面量中使用，因为字符串化结果可能不友好。

例如，数组具有自定义的toString()方法，它只在内部调用join()，用逗号连接数组元素。这意味着 (1) 数组元素不一定被字符串化为有用的结果 (2) 逗号后面没有空格，导致结果不友好。格式化数组的最佳方法是使用Intl.ListFormat，它甚至支持在必要时添加“and”连接词。如果要将此对象用于模板字面量，则必须显式调用object.toString()，或者打开allowArray选项以专门允许数组。可以使用no-base-to-string规则来防止这种情况意外产生"[object Object]"。

.eslintrc.cjs
module.exports = {
  "rules": {
    "@typescript-eslint/restrict-template-expressions": "error"
  }
};

在游乐场中尝试此规则 ↗

示例​

const arg1 = [1, 2];
const msg1 = `arg1 = ${arg1}`;

const arg2 = { name: 'Foo' };
const msg2 = `arg2 = ${arg2 || null}`;
在游乐场中打开

选项​

此规则接受以下选项，并在 strict 和 strict-type-checked 配置中具有更严格的设置。

type Options = [
  {
    /** Whether to allow `any` typed values in template expressions. */
    allowAny?: boolean;
    /** Whether to allow `array` typed values in template expressions. */
    allowArray?: boolean;
    /** Whether to allow `boolean` typed values in template expressions. */
    allowBoolean?: boolean;
    /** Whether to allow `never` typed values in template expressions. */
    allowNever?: boolean;
    /** Whether to allow `nullish` typed values in template expressions. */
    allowNullish?: boolean;
    /** Whether to allow `number` typed values in template expressions. */
    allowNumber?: boolean;
    /** Whether to allow `regexp` typed values in template expressions. */
    allowRegExp?: boolean;
  },
];

const defaultOptionsRecommended: Options = [
  {
    allowAny: true,
    allowBoolean: true,
    allowNullish: true,
    allowNumber: true,
    allowRegExp: true,
  },
];

// These options are merged on top of the recommended defaults
const defaultOptionsStrict: Options = [
  {
    allowAny: false,
    allowBoolean: false,
    allowNullish: false,
    allowNumber: false,
    allowRegExp: false,
    allowNever: false,
  },
];

allowNumber​

使用 { allowNumber: true } 的此规则的额外 **正确** 代码示例

const arg = 123;
const msg1 = `arg = ${arg}`;
const msg2 = `arg = ${arg || 'zero'}`;
在游乐场中打开

此选项控制数字和 BigInt。

allowBoolean​

使用 { allowBoolean: true } 的此规则的额外 **正确** 代码示例

const arg = true;
const msg1 = `arg = ${arg}`;
const msg2 = `arg = ${arg || 'not truthy'}`;
在游乐场中打开

allowAny​

使用 { allowAny: true } 的此规则的额外 **正确** 代码示例

const user = JSON.parse('{ "name": "foo" }');
const msg1 = `arg = ${user.name}`;
const msg2 = `arg = ${user.name || 'the user with no name'}`;
在游乐场中打开

allowNullish​

使用 { allowNullish: true } 的此规则的额外 **正确** 代码示例

const arg = condition ? 'ok' : null;
const msg1 = `arg = ${arg}`;
在游乐场中打开

allowRegExp​

使用 { allowRegExp: true } 的此规则的额外 **正确** 代码示例

const arg = new RegExp('foo');
const msg1 = `arg = ${arg}`;
在游乐场中打开
const arg = /foo/;
const msg1 = `arg = ${arg}`;
在游乐场中打开

allowNever​

使用 { allowNever: true } 的此规则的额外 **正确** 代码示例

const arg = 'something';
const msg1 = typeof arg === 'string' ? arg : `arg = ${arg}`;
在游乐场中打开

allowArray​

使用 { allowArray: true } 的此规则的额外 **正确** 代码示例

const arg = ['foo', 'bar'];
const msg1 = `arg = ${arg}`;
在游乐场中打开

何时不使用它​

如果您不担心在模板字面量中错误地将非字符串值转换为字符串，那么您可能不需要此规则。

类型检查的 lint 规则比传统的 lint 规则更强大，但也需要配置 类型检查的 lint。如果您在启用类型检查规则后遇到性能下降，请参阅 性能故障排除。

资源​