Question

假设我有这些全局变量：

var name, car;

然后我宣布了一些值：

const languageStrings = {
    WELCOME_MESSAGE: 'Welcome #name, you have a #car',
    NAME_USER: "#name",
    CAR_USER: '#car'
};

然后我需要将它分配给一个函数。例如：

if (firstTime){
    welcomeMsg = WELCOME_MESSAGE;
}

现在，我有两个问题：

1）如何在字符串中插入变量，以便在调用值对时动态更新？

2）我如何使用JSON做同样的事情？

Answer 1

您必须创建一个返回变量值的函数。

在你的情况下：

welcomeMessage = function(){
   return WELCOME_MESSAGE
}

你可以用：

引用变量

welcomeMessage()

因此，您要将变量指定为返回另一个变量的当前值的函数。通过将变量作为函数调用来获得值。

Answer 2

关于如何在字符串中插入变量的问题的答案是：

WELCOME_MESSAGE: 'Welcome ' + name + ', you have a ' + car,

或在定义之前：

function mesg(name, car){
    return "Welcome" + name + ", you have a " + car;
}
mesg(bob, BMW);

在这种情况下，名称和汽车是在。

之后定义的

Answer 3

当某些变量发生变化时，您不能“自动”更新JSON结构或字符串。不过，还有其他方法可以做这种模板。您可以创建一个函数来在需要时创建欢迎消息：

function getWelcomeMessage(name, car) {
  return "Welcome "+name+", you have a "+car;
}

然后你会做welcomeMsg = getWelcomeMessage("Joe", "Camry");

之类的事情

如果您不想为每个模板编写一个函数（例如，如果您有很多模板），那么您可以像这样使用String.replace：

function applyTemplate(template, params) {
  return template.replace(/#(\w+)/g, (m, name) => params[name]);
}

使用示例：

function applyTemplate(template, params) {
  return template.replace(/#(\w+)/g, (m, name) => params[name]);
}

const WELCOME_TEMPLATE = "Welcome #name, you have a #car";

var name = "Joe";
var car  = "Camry";
var welcomeMessage = applyTemplate(WELCOME_TEMPLATE, {name, car});
console.log(welcomeMessage);

Answer 4

JavaScript中的字符串是原始类型，它是按值传递的。因此，一旦为变量分配了一个字符串，它就永远不会改变，直到您明确地为其指定另一个值（或对象引用）。

但是，您可ask object type for help，这可能会使您的数据被动（或动态，如果您更喜欢这个词）在某些条件下更新。

var languageStrings = {
  WELCOME_MESSAGE: '',
  NAME_USER: '',
  CAR_USER: ''
}

Object.defineProperty(languageStrings, 'name', {
  get: function (name) {
    return this.NAME_USER
  },
  set: function (name) {
    this.NAME_USER = name
    this.WELCOME_MESSAGE = `Welcome ${this.name}, you have a ${this.car}.`
  }
})

Object.defineProperty(languageStrings, 'car', {
  get: function (car) {
    return this.CAR_USER
  },
  set: function (car) {
    this.CAR_USER = car
    this.WELCOME_MESSAGE = `Welcome ${this.name}, you have a ${this.car}.`
  }
})

现在，每当您更改languageStrings.name或languageStrings.car时，您想要的所有三个字符串都会自动采用您刚设置的新值：

languageStrings.name = 'Leo'
languageStrings.car = 'BMW'

for (let key in languageStrings) {
  console.log(`${key}: ${languageStrings[key]}`)
}
// WELCOME_MESSAGE: Welcome Leo, you have a BMW.
// NAME_USER: Leo
// CAR_USER: BMW

您不必一直手动拨打applyTemplate，就像在@ qxz的回答中一样（尽管我不是说错了）。

此外，请注意，即使name和car无法枚举，也无法使用for in，for of或Object.keys访问这些内容！这很棒，你的实现细节是隐藏的，不用担心或混淆其他使用你代码的开发人员。

事实上，这种反应模型现在广泛用于前端MV *框架，例如， Vue

关于你的第二个问题，我没有老实说。只需JSON.parse然后它就是普通的JavaScript，不是吗？

将声明的变量分配给数组javascript中的字符串

4 个答案: