标签: template-literals

这是我的代码：

let padded = "03";
ascii = `\u00${padded}`;

然而，我收到了Bad character escape sequence来自 Babel 的信息。我试图结束：

\u0003

在变量中ascii。我究竟做错了什么？

编辑：

最终以ascii = (eval('"\\u00' + padded + '"'));

我正在开发一个javascript插件，它使用es6模板文字来生成模板，我在我的插件中附加了一段代码。

"use strict";
(function () {
window.project = {
    template: {
        generateHtmlTemplate: function(data) {
        var template = `
             <div class="main">
                <div class="wrap">
                    <input type="text" value="${data.val}" />
                </div>
             </div>`;
       return template;
      }
   }
}

当我尝试通过 webpack 进行构建时，babel 将其转换为 es5，因此模板文字如下所示。这是该插件的webpack 缩小版 babel 转译版本。这个缩小的转译文件供用户使用。此生产版本缩小文件包含 \n \t，这是我要删除的内容。

（就像用 es6 编写的 jQuery 开发版本一样，使用 babel 和 webpack 对其进行转译和缩小以形成 jquery.min.js）

"use strict";
(function () {
window.project = {
    template: {
        generateHtmlTemplate: function(data) {
        var template = '<div class="main">\n\t\t\t<div class="wrap">\n\t\t\t\t<input type="text" value="${data.val}" />\n\t\t\t\t\t</div>\n\t\t\t\t\t</div>';
       return template;
      } …

String.raw可用于创建包含反斜杠的字符串，而不必将这些反斜杠加倍。

从历史上看，您需要在创建字符串时将反斜杠加倍：

let str = "C:\\Program Files\\7-Zip";
console.log(str);

String.raw 允许您的代码显示没有双反斜杠的路径：

let str = String.raw`C:\Program Files\7-Zip`;
console.log(str);

上面的代码工作正常，但今天我发现如果原始字符串以反斜杠结尾，它就不起作用：

let str = String.raw`Can't End Raw With Backslash\`;
console.log(str);

上面的代码段产生了这个错误：

{
  "message": "SyntaxError: `` literal not terminated before end of script",
  "filename": "https://stacksnippets.net/js",
  "lineno": 14,
  "colno": 4
}

为什么这是一个例外？

const num = 42
const str = `My number is ${num}`

在这段代码中，我对转换num为 a有什么保证string？

是保证只调用它的toString()方法还是可以用另一种方式进行转换？

我的目标是编写一个标记模板函数，例如

myTemplateTagFunction`some text ${variable} etc. etc.`

...其行为类似于 javascript 中的默认模板文字函数。

我的第一次尝试是

let myTaggedTemplate = args => `${args}`

但这很快就打破了......

> myTaggedTemplate`hello world ${2 + 5}`
// "hello world ,"

> `hello world ${2 + 5}`
// "hello world 7"

一定有一种我缺少的更简单的方法可以做到这一点？

我想从模板文字类型（自 TypeScript 4.1 起可用）中排除一些子字符串，但我不知道是否可能。

例子：

我可以定义一个类型，说“这个字符串是一个包含 2 个或更多元素的元组”，即类似于'[string, number]'这个文字类型：

type TupleWithTwoOrMoreElements = `[${string}, ${string}]`;

现在，我想做相反的事情，即通过排除 substring创建一个文字类型，表示“这是一个类似元组的元素少于 2 个”, 。我想做这样的事情：

type TupleWithLessThanTwoElements = `[${someStringWithoutCommaOrSpace}]`;

我认为不可能编写这种“regex-literal-type”，但我想知道是否有人能够解决这个问题。

我试图将变量插入到传递给字节数组的字符串中。我想要的是这样的：

myLocation := "foobar123"
rawJSON := []byte(`{
        "level": "debug",
        "encoding": "json",
        // ... other stuff
        "initialFields": {"location": ${myLocation} },
    }`)

我知道这在 Go 中是不可能的，因为我是从 JS 那里得到的，但我想做类似的事情。

根据@TheFool的回答，我已经这样做了：

    config := fmt.Sprintf(`{
        "level": "debug",
        "encoding": "json",
        "initialFields": {"loggerLocation": %s },
    }`, loggerLocation)
    rawJSON := []byte(config)

我正在使用样式组件作为React样式的解决方案.他们有一个很好的方法,使用模板文字插入CSS.模板文字传递组件的道具,以便您可以执行以下操作:

const PasswordsMatchMessage = styled.div`
    background: ${props => props.isMatching ? 'green' : 'red'};
`

结果是一个组件,它div根据值的值呈现带有绿色或红色背景的标记isMatching.以上将通过JSX使用,如下所示:

<PasswordsMatchMessage isMatching={doPasswordsMatch}>...</PasswordsMatchMessage>

每次props更改值时,都会重新插入此字符串.这终于让我想到了我的问题:

每次插入模板文字时,是否都会重新定义模板文字中定义的箭头函数？

如果是这样,那么我可以考虑在模板文字之外创建函数,并将其传递给,例如

const PasswordsMatchMessage = styled.div`
    background: ${isMatchingFn};
`

我想知道什么是与JSX标签内的变量混合的字符串值的最佳实践,我列出了我熟悉的选项:

render() {
    const {totalCount} = this.state;
    const totalCountStr = `Total count: ${totalCount}`;
    return (
        <div>
            <h1>Total count: {totalCount}</h1> // 1
            <h1>`Total count: ${totalCount}`</h1> // 2
            <h1>{totalCountStr}</h1> // 3
        </div>
    );
}

最佳做法或用例以不同方式使用它们是什么？

谢谢!

I'm trying to re-use a template literal in javascript.

This isn't working:

let int;
let temp= `Number is: ${int}`;
console.log(temp)
// Number is: undefined
int = 1;
console.log(temp)
// Number is: undefined
int = 2;
console.log(temp)
// Number is: undefined

I thought that changing int variable will dynamicaly change in the template. but i learned otherwise :D

Is it even possible and if so what is the right way of doing it?

Thanks.