用json對象替換動態字符串模板變量

Question

我有像下面的示例模板我想用json對象值替換學校，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'}}}]; 

在字符串替換的幫助下需要實現這個（單一邏輯）。輸出希望像這樣「歡迎來到世界的嬰兒sha」「

Answer 1

如果有任何機會，lodash.js可用，您可以使用它的_.template函數。更多詳情here。

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)

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

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

要建議也歡迎！