标签: template-literals

在名为"Car"的函数中,我添加了一个方法"beep",带有可选的消息输入:

this.beep = function (message) { }

我想使用模板文字来记录函数内部:

console.log(this.name + ': ' + 'Beeeeep!' + (message ? ' ' + message : ''))

我写了以下内容,但输出显示了文字本身的内容:

console.log(`${this.name}: Beeeeep! ${ (message) => {
  if (message) return `${message}`;
    return ' ';
  }}`);

输出(对于this.name ='myCar'):

myCar: Beeeeep! (message) => {
    if (message) return `${message}`;
    return '';
  }

为什么它记录文字的内容而不是透明呢？

*我想出了如何以更简单的方式编写它:

console.log(`${this.name}: Beeeeep! ${message || ''}`)

但是我仍然想要了解第一个代码中的错误.

我有以下几点：

return (useWordBoundary ? subString.substr(0, subString.lastIndexOf(' ')) : subString) + '\u2026';

Eslint 拒绝我的代码说：

建议使用模板文字而不是字符串连接。（首选模板）

以上有什么问题？

在以下示例中，我尝试呈现帖子列表（标题，正文及其标签）：

const container = $('.container');
posts.forEach((post)=> {
 container.append(
`<div>
  <h2>${post.title}</h2>
  <p>${post.body}</p>
  <div>
   ${post.tags.map((tag) => {
     `<span>${tag.name}</span>`
   })}
  </div> 
 </div>`)
});

但是，输出会在标记之间产生一个额外的逗号。我试图输出'test'而不是实际的标签名称，以及将span标签换成另一个html标签，但是结果仍然相同。

我曾尝试搜索此问题，但没有找到其他任何使用模板文字遇到此问题的人。

我试图想出一种方法来传递一个字符串数组并将其嵌入到查询中(使用React,GraphQL).问题是它接受参数作为字符串数组,但在嵌入时将其转换为字符串.

假设我有这个函数调用来获取一些数据.(我现在对这个论点进行了硬编码,但是一旦我弄清楚它就会变成一个变量).

//这里我正在调用这个函数

 const query = getData.generate(["123", "456"]);
        return GraphqlClient.query(query)
        .then((e) => {
            return e.data.oneAppProviders;
        }) .......

//这里是带有嵌入参数的查询.(后端需要一个字符串数组.)

export default {
generate(id) {
// console.log(id)        // output: ["123", "456"]
    return { query : gql`{
        oneAppProviders(id: ${id}) {
            id
            firstName
         }
    }
}}

当我运行它时,我收到此错误:

GraphQLError {message: "Syntax Error: Expected Name, found Int "456""

我想,当我嵌入它时,它将它转换为整数...如果我的数组是["123"],我会收到以下错误:

[GraphQL error]: Message: Expected type [String], found 123.

我希望这个问题足够清楚.提前致谢.

我在tbody中显示表格数据时遇到问题，在我的javascript中我得到了结果对象，并且我在javascript文件中使用了模板文字，这是我的代码：

for (i = 0; i < size; i++) 
{
    serialNo++;
    html += `<tr>
    <td>${serialNo}</td>
    <td>${result[i].first_name}</td>
    <td>${result[i].last_name}</td>
    <td>${result[i].email}</td>
    <td>${result[i].mobile}</td>
    (${(result[i].status == 1)} ? '<td><div class="switchery-demo">
    <input type="checkbox" checked id="demo${result[i].contact_id}" 
    onclick="status_item(this,'${result[i].contact_id}')" 
    data-plugin="switchery" data-size="small" data-color="#1bb99a"/> 
    </div></td>' : '<td><div class="switchery-demo"><input 
    type="checkbox" checked data-plugin="switchery" 
    id="demo${result[i].contact_id}" 
    onclick="status_item(this,'${result[i].contact_id}')" data- 
    size="small" data-color="#1bb99a"/></div></td>')
    </tr>`;
}

在result [i] .status中，我正在使用三元运算符，我正在检查status == 1，然后显示另一个，然后显示第二个，但它创建的是两个而不是一个，我不知道我要去哪里，请帮忙。

有人可以帮我修复我的代码吗？我在本练习中使用了 forEach 方法

我认为我\xe2\x80\x99m关闭，但它\xe2\x80\x99s仍然给我未定义，它\xe2\x80\x99s已经在result.failure中，因为我通过添加另一个字符串/数字进行检查。

const result = {\n  success: ["max-length", "no-amd", "prefer-arrow-functions"],\n  failure: ["no-var", "var-on-top", "linebreak",],\n  skipped: ["no-extra-semi", "no-dup-keys"]\n};\nfunction makeList(arr) {\n  // Only change code below this line\n  const failureItems = [];\n\n  const results = arr.forEach(k => failureItems.push(`<li class="text-warning">${arr[k]}</li>`));\n\n\n  // Only change code above this line\n\n  return failureItems;\n}\n\nconst failuresList = makeList(result.failure);\nconsole.log(failuresList);\n

应该是这样的结果

[\n  '<li class="text-warning">no-var</li>',\n  '<li class="text-warning">var-on-top</li>',\n  '<li class="text-warning">linebreak</li>'\n]\n

但在这段代码中我的结果是这样的

[ '<li class="text-warning">undefined</li>',\n  '<li class="text-warning">undefined</li>',\n  '<li class="text-warning">undefined</li>' ]\n

我正在尝试编写一种类型，可以从另一种类型的键中删除给定的前缀。

我尝试过以下代码：

type StripPrefix<
  TPrefix extends string,
  T extends `${TPrefix}.${string}`,
> = T extends `${TPrefix}.${infer R}` ? R : never;

type MapKeysStripPrefix<T, TPrefix extends string> = {
  [K in StripPrefix<TPrefix, keyof T & `${TPrefix}.${string}`>]: Pick<
    T,
    keyof T & `${TPrefix}.${string}`
  >[`${TPrefix}.${K}`];
};

type test = {
  'test.blah': 1;
  'test.foo': 2;
  'bar.baz': 3;
};

type result = MapKeysStripPrefix<test, 'test'>;

但我收到一个错误：

Type '`${TPrefix}.${K}`' cannot be used to index type 'Pick<T, keyof T & `${TPrefix}.${string}`>'

我意识到这可能是不可能做到的。

我想使用模板文字，即反引号，将数组中的元素插入到我的 HTML 中。本质上，我想创建自己的极其简单的模板系统。

我希望forEach工作，每个迭代回调只是插入返回的文本。但是，它只是返回undefined，例如：

const myArray = ['square', 'triangle', 'circle'];
document.querySelector('div').innerHTML = `
  <p>Some shapes:<\p>
  <ul>
    ${myArray.forEach(elmt => `
      <li>${elmt}</li>
    `)}
  </ul>
`;

<div></div>

那么，我该怎么做呢？

我尝试使用模板文字

预期结果是“测试数据测试”

但是，它不起作用

如何在jsp上使用呢？

<%@ page language="java" contentType="text/html; charset=UTF-8"\r\n    pageEncoding="UTF-8"%>\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset="UTF-8">\r\n<title>Insert title here</title>\r\n</head>\r\n<script>\r\nvar t = "TEST";\r\n\r\nconsole.log(`\xed\x85\x8c\xec\x8a\xa4\xed\x8a\xb8 \xeb\x8d\xb0\xec\x9d\xb4\xed\x84\xb0  ${t} `);\r\n</script>\r\n<body>\r\n\r\n</body>\r\n</html>

\n

I\xe2\x80\x99m 尝试在数组中存储大量文本（这样我可以使用值轻松地将其取出）。\n问题出在字符串中 I\xe2\x80\x99d 喜欢使用模板文字，因此字符串根据输入而变化（例如，一旦他们\xe2\x80\x99添加了他们的名字，它就会使用他们的名字。

如果我在函数中包含字符串，我就可以正常工作。例如：

textbox.textContent =  `what does ${nameTemp} do?`;\n

这没问题，它将“nameTemp”更改为用户输入的内容。但下面这个却没有！它始终返回“tim”作为名称（“nameTemp”的默认值）

textbox.textContent2 = Title[1]; \n

您可以在函数 saveName() 的下面代码中看到，第一行（包含模板文字的完整字符串）确实有效。但是下面的行，使用数组中的字符串（包含模板文字）不会更新。它使用默认字符串 \xe2\x80\x98tim\xe2\x80\x99。\n我做错了什么？如何最好地将字符串存储在具有可更改元素的数组中？提前感谢您的任何建议。

var nameTemp = `tim`;\n\nlet Title = [];\nTitle[0] = "What are you called?";\nTitle[1] = `what does ${nameTemp} do?`;\n\nconst input = document.createElement(\'input\');\ninput.type = "text";\ninput.id ="nameText";\ninput.className +=\'inputStyle\';\n\n function addNameInput()\n    {\n     container.appendChild(input);\n    }\n\n function saveName()\n    {\n     if (nameText.value !== null)\n     {\n     nameTemp = nameText.value;\n     textbox.textContent =  `what does ${nameTemp} do?`; //This works, it displays the inputed name\n     textbox.textContent2 …

我正在观看几年前关于学习 javascript 的 YouTube 视频，在视频中，除了在我的 VScode 上之外，代码似乎都可以工作。

这是代码，请让我知道我可能错过了什么：

function Person(firstName, lastName, dob) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.dob = new Date(dob);
    this.dateBio = function() {
        return `${this.dob.getFullYear}`
    }

}

Person.prototype.fullName = function() {
    return `${this.firstName} ${this.lastName}`
}

const person1 = new Person('James','Smith', '27 July 1967');
const person2 = new Person('Mary', 'Franklin', '5 November 1991')

console.log(person1.fullName)