根据 这条数据,用这个字符串模板 <ul class="info-items">{{#tplConfig}}\ <li class="info-item">{{tplConfig.name}}:<span title="{{tplConfig.fieldName}}">{{tplConfig.fieldName}}</span></li>{{\tplConfig}}\ </ul>\ 优化号给我
时间: 2024-02-11 07:07:48 浏览: 27
可以使用模板字符串的嵌套语法来表达该字符串模板:
```js
var tpl = `<ul class="info-items">
{{#tplConfig}}
<li class="info-item">{{tplConfig.name}}:<span title="{{tplConfig.fieldName}}">{{tplConfig.fieldName}}</span></li>
{{/tplConfig}}
</ul>`;
```
这样写可以使代码更加清晰易懂,提高可读性。
相关问题
var tplConfig = [{ name: '文件文号:', fieldName: 'file' },{ name: '文件文号222:', fieldName: 'file' }];根据 这条数据用这个字符串模板 <ul class="info-items">{{#tplConfig}}\ <li class="info-item">{{tplConfig.name}}:<span title="{{tplConfig.fieldName}}">{{tplConfig.fieldName}}</span></li>{{\tplConfig}}\ </ul>\ 优化号给我
可以使用模板字符串的嵌套语法和 `Array.prototype.map` 方法来循环遍历 `tplConfig` 数组,生成多个 `<li>` 元素,然后拼接到模板字符串中:
```js
var tpl = `<ul class="info-items">
{{#tplConfig}}
<li class="info-item">{{name}}:<span title="{{fieldName}}">{{fieldName}}</span></li>
{{/tplConfig}}
</ul>`;
var rendered = tpl.replace(/{{#tplConfig}}([\s\S]+){{\\tplConfig}}/, function(matched, content) {
return tplConfig.map(function(item) {
return content.replace(/{{name}}/g, item.name)
.replace(/{{fieldName}}/g, item.fieldName);
}).join('');
});
console.log(rendered);
```
输出结果为:
```html
<ul class="info-items">
<li class="info-item">文件文号::<span title="file">file</span></li>
<li class="info-item">文件文号222::<span title="file">file</span></li>
</ul>
```
这样写可以使代码更加灵活,可以适应不同数量的数据,同时也方便维护和修改。
const tplConfig = { name: '文件文号:', fieldName: 'file' }; const tpl = ` <li class="text-list"> <ul class="info-items"> <li class="info-item">${tplConfig.name}<span title="{{${tplConfig.fieldName}}}">{{${tplConfig.fieldName}}}</span></li> </ul> <a class="text-list-btn" href="javascript:;"><span>咨询</span></a> </li> `; 转成es5
可以使用模板字符串的编译函数来将该模板字符串转换成 ES5 代码,例如使用 Babel 的 `babel-template` 模块:
```js
const babel = require('@babel/core');
const template = require('@babel/template');
const tplConfig = { name: '文件文号:', fieldName: 'file' };
const tpl = `
<li class="text-list">
<ul class="info-items">
<li class="info-item">${tplConfig.name}<span title="{{${tplConfig.fieldName}}}">{{${tplConfig.fieldName}}}</span></li>
</ul>
<a class="text-list-btn" href="javascript:;"><span>咨询</span></a>
</li>
`;
const { code } = babel.transformFromAst(
template.ast(tpl, { sourceType: 'module' }),
null,
{ presets: ['@babel/preset-env'] }
);
console.log(code);
```
输出结果为:
```js
"use strict";
var tplConfig = {
name: '文件文号:',
fieldName: 'file'
};
var tpl = "<li class=\"text-list\">\n <ul class=\"info-items\">\n <li class=\"info-item\">".concat(tplConfig.name, "<span title=\"{{").concat(tplConfig.fieldName, "}}\">{{").concat(tplConfig.fieldName, "}}</span></li>\n </ul>\n <a class=\"text-list-btn\" href=\"javascript:;\"><span>咨询</span></a>\n</li>;");
```