模板设计与实现思路(JSON)

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2959 days ago, the information mentioned may be changed or developed.

功能描述

想输出

我叫 Bob,我今年 20 岁了,我喜欢吃苹果。

如何通过 JSON 和模板来输出这句话, 假如(我说的假如)模板如下:

template{我叫%s,我今年%s 岁了,我喜欢吃%s。}, key{{}.person.name, {}.person.age, {}.fruit[0].name}

{ "fruit": [ { "name": "apple", "sweet": 1 }, { "name": "banana", "sweet": 0 } ], "person": { "name": "Bob", "age": 20 } }

name

模板

JSON

fruit

7 replies 2018-03-25 11:58:01 +08:00

lihongjie0209

Mar 24, 2018

这种功能后端模版很简单, 比如 jsp, 前端就不知道了

daimazha

Mar 24, 2018

https://www.cnblogs.com/shiyou00/p/6841801.html

TomorJM

Mar 24, 2018

问题简化为:

TomorJM

Mar 24, 2018

输入一段模板和 json, 输出处理后的结果

deepred

Mar 24, 2018

最简单的模板引擎原理就是利用正则把占位符用 json 数据替换

qiayue

PRO

Mar 24, 2018

正则找出所有的%s，按顺序替换

xiangyuecn

Mar 25, 2018

核心还不是简单的解析替换

写一个 js 简单的实现：

```
template="我叫{person.name},我今年{person.age}岁了,我喜欢吃{fruit[0].name}";
json={"fruit":[{"name":"apple","sweet":1},{"name":"banana","sweet":0}],"person":{"name":"Bob","age":20}};

template.replace(/{(.+?)}/g,function(a,b){
var res="";
try{
var res=eval('json.'+b)||"";//核心逻辑，语法解析，js 实现起来比较简单粗暴，前提模板是安全的
}catch(e){console.error(e)}

//稍微处理一下，数据是不安全的
res=(res==null?"":res+"").replace(/[<"'\{&]/g,function(a){return "&#"+a.charCodeAt(0)+";"});
return res;
})
```