Question

我有样本模板如下所示我想用json对象值替换school，babydet.name，dept，babydet.section.secname如何做到这一点请帮我解决这个问题。

var Template1 = 'Welcome to the {{school}} baby {{babydet.name}}'
var Template2 = 'Welcome to the school {{school}} department {{dept}} babydetails {{babydet.name}} {{babydet.section.secname}}'

const namelist1= [{school:'GOVSchool',babydet: { name: 'shanker' }}];
const namelist2= [{school:'GOVSchool',dept:'CS',babydet: { name: 'shanker',section:{sectname:'A Section'}}}];

借助字符串替换需要实现这一点（单一逻辑）。输出想要这样＆＃34;欢迎来到世界婴儿小腿＆＃34;

Answer 1

如果有可能lodash.js可用，您可以使用_.template函数。更多详情here。

＆＃13;

var Template1 = 'Welcome to the {{school}} baby {{babydet.name}}'
var Template2 = 'Welcome to the school {{school}} department {{dept}} babydetails {{babydet.name}} {{babydet.section.secname}}'

var namelist1= [{school:'GOVSchool',babydet: { name: 'shanker' }}];
var namelist2= [{school:'GOVSchool',dept:'CS',babydet: { name: 'shanker',section:{sectname:'A Section'}}}];

_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var interpolator = _.template(Template1);
var interpolated = interpolator(namelist2[0]);

console.log(interpolated)

interpolator = _.template(Template2);
interpolated = interpolator(namelist2[0]);

console.log(interpolated)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

＆＃13;

Answer 2

您可以使用ES6 Template literals来插入字符串。我将做一些基本假设（并为此示例对其进行硬编码），以便只回答您提出的问题：您的namelist变量是从JSON数据解析的某个对象的替身，您知道它的结构，你知道如何迭代数据数组，使这个解决方案真正有用。

模板文字附有反引号“`”而不是引号，并用${/* reference variable */}

包围变量

const namelist1= [{school:'GOVSchool',babydet: { name: 'shanker' }}];
const namelist2= [{school:'GOVSchool',dept:'CS',babydet: { name: 'shanker',section:{sectname:'A Section'}}}];

let Template1 = `Welcome to the ${namelist1[0].school} baby ${namelist1[0].babydet.name}`;
let Template2 = `Welcome to the school ${namelist2[0].school} department ${namelist2[0].dept} babydetails ${namelist2[0].babydet.name} ${namelist2[0].babydet.section.sectname}`;

Answer 3

您可以使用此库进行字符串插值。 https://www.npmjs.com/package/string-format.String::format是一个基于Python的str.format（）格式化字符串的小型JavaScript库。

Answer 4

我做了类似的事情，唯一的区别是我的JSON对象没有嵌套属性。

我使用的是一种简单的方法（希望不是太简单）。它可以接受HTML模板中要替换的任意数量的属性。

给出一个模板：

let template =
  '<div><span>{{ text }}</span><span>{{description}}</span></div>';

还有一些数据：

let data = { text: 'My Text', description: 'my description' };

我会得到：

<div><span>My Text</span><span>my description</span></div>

请在此处查看JSBin中的实现：https://jsbin.com/zelogof/7/edit?js,console

也欢迎更好的建议！

用json对象替换动态字符串模板变量

4 个答案: