Javascript 如何从js中的字符串构建变量？

我想创建一个动态函数，从字符串中返回一个变量。我正在使用ES6中的模板字符串，但我不知道以后如何调用它。我需要传递一个保持对象作为引用的变量

const checkDeviceWidth = type => {
    if (documentWidth > 1200) return `${type}Options`;
    if (documentWidth > 414) return `${type}MediumOptions`;
    return `${type}MobileOptions`;
  };

...

<Lottie
  ref={backgroundImg}
  isClickToPauseDisabled={true}
  speed={1}
  options={checkDeviceWidth('background')}></Lottie>

---

这样，我得到一个错误，在选项中我必须传递一个对象而不是字符串。没有eval函数以后如何调用它？我正在使用React

您可以将常量放入对象

 const myObject = {
  backgroundOptions: {
    loop: true,
    autoplay: true,
    animationData: background.default
  },
  backgroundMediumOptions: {
    loop: true,
    autoplay: true,
    animationData: backgroundMedium.default
  }
};

然后得到正确的财产

  const checkDeviceWidth = type => {
    if (documentWidth > 1200) return myObject[`${type}Options`];
    if (documentWidth > 414) return myObject[`${type}MediumOptions`];
    return myObject[`${type}MobileOptions`];
  };

---

您可以将常量放入对象

 const myObject = {
  backgroundOptions: {
    loop: true,
    autoplay: true,
    animationData: background.default
  },
  backgroundMediumOptions: {
    loop: true,
    autoplay: true,
    animationData: backgroundMedium.default
  }
};

然后得到正确的财产

  const checkDeviceWidth = type => {
    if (documentWidth > 1200) return myObject[`${type}Options`];
    if (documentWidth > 414) return myObject[`${type}MediumOptions`];
    return myObject[`${type}MobileOptions`];
  };

---

不要将这些对象作为单独的变量，而是将它们移动到对象选项中，并使用该选项传递道具

const options = {
  backgroundOptions: {
    loop: true,
    autoplay: true,
    animationData: background.default,
  },
  backgroundMediumOptions: {
    loop: true,
    autoplay: true,
    animationData: backgroundMedium.default,
  }
};

并使用它将它们传递给道具：

<Lottie
  ref={backgroundImg}
  isClickToPauseDisabled={true}
  speed={1}
  options={options[checkDeviceWidth('background')]}
/>

---

或者，您可以从checkDeviceWidth函数返回所需的对象，而不是返回字符串。

将这些对象作为单独的变量保留，而不是将其移动到对象选项中，并使用该选项传递道具

const options = {
  backgroundOptions: {
    loop: true,
    autoplay: true,
    animationData: background.default,
  },
  backgroundMediumOptions: {
    loop: true,
    autoplay: true,
    animationData: backgroundMedium.default,
  }
};

并使用它将它们传递给道具：

<Lottie
  ref={backgroundImg}
  isClickToPauseDisabled={true}
  speed={1}
  options={options[checkDeviceWidth('background')]}
/>

或者，您可以只从checkDeviceWidth函数返回所需的对象，而不是返回字符串。

使用eval确实很糟糕。如果你认为你真的需要评估，那你就错了，需要重新思考一下。这是一种不同的方法，不在函数中使用类型arg，可以使用另一个哈希级别来解决：

const backgroundOptions = {
  big: {
    loop: true,
    autoplay: true,
    animationData: background.default,
  },
  medium: {
    loop: true,
    autoplay: true,
    animationData: backgroundMedium.default,
  }
};
const checkDeviceWidth = () => {
    if (documentWidth > 1200) return 'big';
    if (documentWidth > 414) return 'medium';
    return 'mobile';
  };

...

<Lottie
  ref={backgroundImg}
  isClickToPauseDisabled={true}
  speed={1}
  options={ backgroundOptions[ checkDeviceWidth() ] }></Lottie>

使用eval真的很邪恶。如果你认为你真的需要评估，那你就错了，需要重新思考一下。这是一种不同的方法，不在函数中使用类型arg，可以使用另一个哈希级别来解决：

const backgroundOptions = {
  big: {
    loop: true,
    autoplay: true,
    animationData: background.default,
  },
  medium: {
    loop: true,
    autoplay: true,
    animationData: backgroundMedium.default,
  }
};
const checkDeviceWidth = () => {
    if (documentWidth > 1200) return 'big';
    if (documentWidth > 414) return 'medium';
    return 'mobile';
  };

...

<Lottie
  ref={backgroundImg}
  isClickToPauseDisabled={true}
  speed={1}
  options={ backgroundOptions[ checkDeviceWidth() ] }></Lottie>

为什么不：

const options = {
  background: {
    default: {...},
    medium: {...},
    mobile: {...}
  },
  text: {
    default: {...},
    medium: {...},
    mobile: {...}    
  },
  size: {
    default: {...},
    medium: {...},
    mobile: {...}
  }
};

然后

const getSize = () => {
  if (documentWidth > 1200) {
    return 'default';
  } else if(documentWidth > 414) {
    return 'medium';
  } else if(....) {
    return 'some_other_size';
  }
}
}

const getOptions = checkDeviceWidth = type => {
  return options[type][getSize];
}

为什么不：

const options = {
  background: {
    default: {...},
    medium: {...},
    mobile: {...}
  },
  text: {
    default: {...},
    medium: {...},
    mobile: {...}    
  },
  size: {
    default: {...},
    medium: {...},
    mobile: {...}
  }
};

然后

const getSize = () => {
  if (documentWidth > 1200) {
    return 'default';
  } else if(documentWidth > 414) {
    return 'medium';
  } else if(....) {
    return 'some_other_size';
  }
}
}

const getOptions = checkDeviceWidth = type => {
  return options[type][getSize];
}

---

我建议使用switch case，而不是尝试将字符串计算为变量名。我建议将所有devicewidth选项放在对象中，而不是变量中。正如SafiI所回答的那样，我建议使用switch case，而不是尝试将字符串计算为变量名。我建议将所有devicewidth选项放在对象中，而不是变量中。就像SafiMy清晨大脑没有想到这个，很好的回答：pMy清晨大脑没有想到这个，很好的回答：p