使用 let hello = `My age is ${age}` 但更新年龄不会更新此命令中的年龄

Question

我想设置问候语，这样我就不必再完整地输入它了。

所以我做到了：

let hello = `My name is ${name} and I am ${age} years old`

所以要让我打招呼，我只需输入：

console.log(hello);

不过后来我更新了年龄

++age;

但是当我这样做的时候，我又向自己打招呼了

console.log(hello);

“你好”中的“年龄”没有显示为更新。

例如，

let age = 20;
let name = "John";
let hello = `My name is ${name} and I am ${age} years old`
console.log(hello);

...输出是：我叫约翰，今年 20 岁。

然后我更新了年龄

++age;
console.log(hello);

...但输出仍然是：我的名字是约翰，我今年 20 岁。

。 .

原来我有

const hello = `My name is ${name} and I am ${age} years old`

但将“const”改为“let”似乎并没有什么不同。

我也试过

age++;

而不是

++age;

看看我是否记错了那个命令，但似乎都没有影响。

Answer 1

一旦您的hello 分配运行，hello 的静态值例如为My name is John and I am 20 years old。更改 age 不会对 hello 产生任何影响，除非您再次进行分配：

let age = 20
let name = "John"
let hello = `My name is ${name} and I am ${age} years old`
console.log(hello)

age++
hello = `My name is ${name} and I am ${age} years old` // << THIS
console.log(hello)

但是，这当然是重复的代码，这绝不是一件好事。因此，您可以改用function：

const getHello = (age, name) => `My name is ${name} and I am ${age} years old`

let age = 20
let name = "John"
console.log(getHello(age, name))

age++
console.log(getHello(age, name))

在这里，变量作为参数给出。如果只需要一处，又想直接从局部变量中读取，也可以close over them，像这样：

let age = 20
let name = "John"

const getHello = () => `My name is ${name} and I am ${age} years old`

console.log(getHello())

age++
console.log(getHello())

另一种方法是继续使用hello 作为局部变量，但有一个更新它的函数，所以你仍然需要记住更新它，但它会消除实际字符串插值的重复代码：

let age = 20
let name = "John"
let hello

const updateHello = () => {
  hello = `My name is ${name} and I am ${age} years old`
}

updateHello()
console.log(hello)

age++
updateHello()
console.log(hello)

使用getter 是一种看起来更像自动更新变量的不太明确的方式。虽然你不能将局部变量定义为 getter，但你可以在一个类（或一般的对象）中做到这一点：

class Test {
  constructor (age, name) {
    this.age = age
    this.name = name
  }

  get hello () {
    return `My name is ${this.name} and I am ${this.age} years old`
  }
}

const test = new Test(20, "John")
console.log(test.hello)

test.age++
console.log(test.hello)

---

旁注：前端框架Svelte 具有reactive declarations，使用$: 前缀，其工作方式与您在此处想象的方式更加相似。

<script>
  let name = "John"
  let age = 20
  $: hello = `My name is ${name} and I am ${age} years old`

  function handleClick() {
    age += 1
  }
</script>

<input type="text" bind:value={name}><br>
<input type="number" bind:value={age}>

<button on:click={handleClick}>
  Increase age
</button>

<p>{hello}</p>

See live example

Answer 2

再次分配你好。

let age = 20;
let name = "John";
let hello = `My name is ${name} and I am ${age} years old`
console.log(hello);
++age;
hello = `My name is ${name} and I am ${age} years old`
console.log(hello);

Answer 3

当你跑步时

const hello = `My name is ${name} and I am ${age} years old`

name 和 age 与字符串“合并”，因此它不会作为变量存储在字符串中，而是作为一个完整的字符串存储。所以你必须做这样的事情，如果你要生成很多这样的字符串，你可以输入一个函数：

let age = 20;
let name = "John";
let hello = `My name is ${name} and I am ${age} years old`
console.log(hello);
age++;
hello = `My name is ${name} and I am ${age} years old`
console.log(hello);

Answer 4

这样想：

let a = 2;
let b = 3;
let sum = a + b;
console.log(sum); //writes 5 to the console

a++;
console.log(sum); //still writes 5 to the console