在命名常量的中间使用变量

Question

我有替换应用程序中字符串的语言设置。为了避免神奇的字符串，我定义了命名常量，但问题是我需要在其中注入一个变量

const language_settings = {
en: {
NOTIFICATION: 'Send notification to my phone',
TIME_REMANING: `Remaining time ${seconds} seconds`
},
fr: {
NOTIFICATION: 'Envoyer verification sur mon portable',
TIME_REMANING: `Temps restant ${seconds} secondes`  
}
}
export default language_settings;

当然，上面的代码抛出异常是因为未定义的"；秒"；变量另外，我不想仅仅因为这个就把字符串一分为二。我能在不做任何重大修改的情况下做到这一点吗？

Answer 1

您可以将它们改为函数：

const language_settings = {
en: {
NOTIFICATION: 'Send notification to my phone',
getTimeRemaining: seconds => `Remaining time ${seconds} seconds`
},
fr: {
NOTIFICATION: 'Envoyer verification sur mon portable',
getTimeRemaining: seconds => `Temps restant ${seconds} secondes`  
}
}

Answer 2

一种快速而肮脏的方法是这样定义字符串："剩余时间$0秒"；每次使用它时都会调用.replace("$0"，秒(。我知道一个流行的游戏叫CS：GO就是这样做的。

或者在NPM上找到一个模板引擎，它可以实现更好的

但是JS字符串模板(backtick字符串(并不是为此而设计的。您还可以使用一个函数，该函数获取一个值并返回生成的字符串

Answer 3

您还可以使用Object.defineProperty动态定义getters/ssetters的对象属性，然后利用这些函数动态设置秒值。

以下代码段将首先打印seconds值为1的值，当seconds更改为5时，记录的语句将打印5。

let seconds = 1;
const language_settings = {
en: {
NOTIFICATION: 'Send notification to my phone',

},
fr: {
NOTIFICATION: 'Envoyer verification sur mon portable',      
}
}
Object.defineProperty(language_settings.en, 'TIME_REMANING', {
get : () => { return `Remaining time ${seconds} seconds`}
});
Object.defineProperty(language_settings.fr, 'TIME_REMANING', {
get : () => { return `Temps restant ${seconds} secondes` }
});

console.log(seconds, language_settings.en.TIME_REMANING, language_settings.fr.TIME_REMANING);
console.log('change second to 5');
seconds = 5;
console.log(seconds, language_settings.en.TIME_REMANING, language_settings.fr.TIME_REMANING);

Answer 4

您可以使用众多模板库中的一个。

以下是一些例子：

胡子.js

const language_settings = {
en: {
NOTIFICATION: 'Send notification to my phone',
TIME_REMANING: 'Remaining time {{seconds}} seconds'
},
fr: {
NOTIFICATION: 'Envoyer verification sur mon portable',
TIME_REMANING: 'Temps restant {{seconds}} secondes'  
}
};
const language = "en";
const template = language_settings[language].TIME_REMANING;
const context = { seconds: 42 };
console.log(Mustache.render(template, context));

<script src="https://unpkg.com/mustache@4/mustache.min.js"></script>

Undercore.js

const language_settings = {
en: {
NOTIFICATION: _.template('Send notification to my phone'),
TIME_REMANING: _.template('Remaining time <%= seconds %> seconds')
},
fr: {
NOTIFICATION: _.template('Envoyer verification sur mon portable'),
TIME_REMANING: _.template('Temps restant <%= seconds %> secondes')
}
};
const language = "en";
const template = language_settings[language].TIME_REMANING;
const context = { seconds: "42" };
console.log(template(context));

<script src="https://unpkg.com/underscore@1/underscore-min.js"></script>