使用 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);

...但是输出仍然是：My name is John and I are 20 years old.

。 .

原来我有

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

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

我也试过了

age++;

而不是

++age;

看看我是否记错了那个命令，但似乎都没有什么不同。

Answer 1

当你运行

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 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

这样想:

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

Answer 4

一旦您的 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 中定义它（或者一般的对象）：

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 has 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

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

Using let hello = `My age is ${age}` but updating age is not updating the age in this command

javascript

constants

let