标签: template-literals

在 TypeScript 4.1 中，是否可以获取字符串类型的类名或函数名？

例如

class Foo { }

type Tpl = `${Foo["name"]}_${"a" | "b" | "c"}`; // error
// should be
// "Foo_a" | "Foo_b" | "Foo_c"

编辑（扩展用例）

由于第一个示例不够明确，可以使用"Foo_a" | "Foo_b" | "Foo_c"as 类型来解析，这里是另一个示例。

class Animal { /* code */ }
class Dog extends Animal { }
class Cat extends Animal { }
class Duck extends Animal { }
// also, someone outside my original code decide to implement another
// animal, and so on. (for example, …

我有一个像这样的枚举：

export enum ApiFunctions {
  "setHidden" = "HIDE",
  "setReadOnly" = "SET_READ_ONLY",
  "setVisible" = "SHOW",
  "setDescription" = "SET_DESCRIPTION",
  "setName" = "SET_NAME",
  "makeRequest" = "MAKE_REQUEST"
}

今天早些时候，我从这个枚举创建了一个新类型，如下所示：

export type ApiActions = Exclude<`${ApiFunctions}`, "MAKE_REQUEST">

此类型返回除“MAKE_REQUEST”之外的所有键值（SET_DESCRIPTION，....）

问题是模板文字类型是在 ts 4.1 上发布的，当前捆绑器的 ts 版本是 3.9.7，我无法真正更新它，因为它是外部提供的。

我尝试通过以下方式复制这种类型：

export type Something = Exclude<typeof ApiFunctions[keyof typeof ApiFunctions], "MAKE_REQUEST">

但是这种类型并没有给我每个键的实际字符串值，而是SET_NAME | SET_DESCRIPTION ...给了我以下行中的内容ApiFunctions.setName | ApiFunctions.setDescription ...

有没有办法以任何其他方式实现与模板文字创建的完全相同的类型？

我将十六进制颜色传递到道具中，并尝试用它设置元素的背景。这是我的代码：

 let cardColourRGB: string;
 if (cardColour) {
   cardColourRGB = "[" + cardColour + "]";
   console.log(cardColourRGB);
 } else {
   cardColourRGB = "white/50"
 }

在函数中return：

 <div className={`bg-${cardColourRGB}`}></div>

传递某些颜色可以，但其他颜色则不行。例如，传入 #AAA32E 作为 prop 不会设置颜色，但直接设置颜色就可以了：

<div className={`bg-[#AAA32E]`}></div>

为什么会这样呢？

我该如何去调用Template文字内部的函数。

以下尝试中的函数语法在HTML中显示：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        var html = `
        <div class="row">
        ${reader.onload = function (e) {
            $('#image_upload_preview').attr('src', e.target.result);
        }}
        <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
        </div>
        `;

        $("#test").append(html);

        reader.readAsDataURL(input.files[0]);
    }
}

$("#multi-file").change(function () {
    readURL(this);
});

谢谢大家。

我尝试渲染ES6模板文字变量:

function render(template, data){
 ...
}
const template = 'resources/${id}/';
console.log(render(template, {id: 1})); // -> resources/1/

是否存在将具有上下文的字符串模板转换为具有ES6模板文字功能的格式化字符串的方法？

我想在JSON文件中存储一些sql字符串.这就是JSON文件在我的理想世界中的样子

[
  "select t.index1, t.title, t.description, t.insertDate
  from myTable t
  join anotherTable t2 on t.index1 = t2.fIndex
  where t2.active = 1",
  ...
]

明显的限制是JSON和javascript不支持多行字符串.

我想避免这样做:

[
  "select t.index1, t.title, t.description, t.insertDate\nfrom myTable t\njoin anotherTable t2 on t.index1 = t2.fIndex\nwhere t2.active = 1",
  ...
]    

我看到一个人这样做了,这也不理想:

[
  ["select t.index1, t.title, t.description, t.insertDate",
  "from myTable t",
  "join anotherTable t2 on t.index1 = t2.fIndex",
  "where t2.active = 1"],
  ...
]

然后在他使用的翻译程序中myMultilineStringInArrayForm.join("\n").

我想知道是否有人为此目的有任何关于模板字符串工作(或计划在将来工作)的信息,如下所示:

[
  `select t.index1, t.title, t.description, t.insertDate
  from myTable t …

如果我想在ES6/ES2015 javascript中打印一个unicode中文字符,我可以这样做:

console.log(`\u{4eb0}`);

同样,如果我想将变量插入到模板字符串文字中,我可以这样做:

let x = "48b0";
console.log(`The character code is ${ x.toUpperCase() }.`);

但是,似乎我无法将两者结合起来打印一个列表,例如,40个连续的unicode中文字符.这不起作用:

for (let i = 0, firstCharCode = parseInt("4eb0", 16); i < 40; ++i) {
    let hexCharCode = (firstCharCode + i).toString(16);
    console.log(`\u{${ hexCharCode }}`); // generates SyntaxError
}

所以我问是否有可能.

在Python中，构建这样的字符串时可以将前导零添加到数字

print "%02d" % (1)
//>> "01"

是否可以对ES6模板文字执行相同的操作？

（如果可以，也可以用空格而不是零来做同样的事情：“ 1”？）

缩进的ESLint规则允许您在使用ignoredNodes选项确定是否应将规则应用于该节点时指定忽略哪些节点。

我有以下要用此规则忽略的代码：

const a = b
  ? `c${
      d
    }`
  : e

具体来说，与的行d和随后的行被报告为比应有的空格多两个。我想忽略规则中的那些行，但是我无法弄清楚应该应用的节点。

节点类型在此仓库中指定。我知道像在此代码中使用的那样，三元表达式是一个ConditionalExpression节点，似乎存在模板文字节点，但我无法使其正常工作。

我知道我可以使用eslint-disable-next-line，eslint-disable等等，但是我不想使用它们，因为那样的话每次出现时我都必须使用它们。

我得到了eslint错误 Unexpected string concatenation.eslint(prefer-template)

const listItemClasses = classNames({
          [' ' + classes[color]]: activeRoute(props, prop.layout + prop.path),
    });

如何使用模板文字修复此问题``或者我是否需要更新eslint规则以允许此操作？