#gist-bookmark #js #i18n #vue

conf-message-strings.md

We have standard way: Template literals.

const str = `${0} ${'foo'}!`;
fn('Hello', {foo: 'World'});

i18n Vue has another way: Linked locale messages

But Template literals are not templates! They can't be stored separately of declarations.

Use simple strings for template instead & custom interpolate function.

function interpolateTemplate(template, ...args) {
	const obj = args[0];

	if (obj instanceof Object) {
		let parts = template.split(/\$\{(?!\d)[\wæøåÆØÅ]*\}/);
		let args = template.match(/[^{\}]+(?=})/g) || [];
		let parameters = args.map(
			(argument) => obj[argument] ||
			(obj[argument] === undefined
				? ""
				: obj[argument])
		);
		return String.raw({ raw: parts }, ...parameters);
	}

	return Object.entries(args).reduce(
		(result, [arg, val]) => result.replace(`$\{${arg}}`, `${val}`),
		template,
	);
}

const result1 = interpolateTemplate("Hello ${0} and ${1}!", "World", "Sun");
const result2 = interpolateTemplate("Hello ${foo} and ${bar}!", { foo: "o-World", bar: "o-Sun" });

console.log(result1);
console.log(result2);

Also you can use render function in Vue with template format such as Hello, {{foo}}!.

Tiny Mustache template renderer:

const json = {
	template: 'by formula: {{formula}}',
	formula: 'SP+{{gamma}}*25',
	gamma: '({{delta}}+4)',
	delta: 2,
};

function render (tmpl, obj) {
	const regex = new RegExp('{{([^}]+)}}', 'g');
	var rendered;
	
	const regReplacerFn = function (match, prop) {
		var retVal = obj[prop];

		if (typeof retVal !== 'string' ||
			typeof retVal === 'string' && retVal.indexOf('{{') == -1) {
			return retVal;
		}
		
		return retVal.replace(regex, regReplacerFn);
	};
	
	rendered = tmpl.replace(regex, regReplacerFn);
	
	return rendered;
}

console.log(render(json.template, json));