在 json 上映射并使用 javascript 转换为 html 时得到额外的逗号
getting extra commas when mapping over json and converting to html using javascript
我正在做一个爱好项目来制作一个站点生成器,该站点生成器使用 json 文件读取使用节点 fs-extra 模块,然后将该数据传递到一个函数中,该函数构建一个 html 文件使用模板文字,但我的 html 中一直有一堆逗号。有谁知道为什么会发生这种情况,或者可以帮助我找到解决方案来解决这个问题?
使用fs包写入文件
<nav>
${
`<ul class='nav-list'>
${navList.map(navItem =>{
return (`<li>
<a href="${
navItem.folder+"/" + navItem.title +".html"
}">
${navItem.navTitle}
</a>
<li>`)
})}
</ul>
`
}
</nav>
这是它输出的带有额外逗号的 HTML - 我有另一个这样的例子,它有更多带有相同逗号问题的标签(为简单起见添加了这个)
输出:
<nav>
<ul class='nav-list'>
<li>
<a href="./root/Index.html">
Home
</a>
<li>,<li>
<a href="./section1/Index2.html">
Section1
</a>
<li>
</ul>
</nav>
这是我在映射上面记录 navList 时我的终端输出的内容
(在 JSON.parse() 之后)
[ { title: 'Index', folder: 'root', navTitle: 'Home' },
{ 标题:'Index2',文件夹:'section1',导航标题:'Section1' } ]
在此先致谢(不在代码块中的上述行是代码块的一部分)
这些逗号来自数组到字符串的隐式转换。如果你不想要这些逗号,你应该明确地将数组转换为你想要的字符串 (join(""))
Would you do this before passing it into the function? Or In the template literal somehow?
我会这样写:
const renderNavItem = ({folder, title, navTitle}) => `<li>
<a href="${folder}/${title}.html">${navTitle}</a>
<li>`;
const renderNav = (items) => `<nav>
${items.map(renderNavItem).join("\n")}
</nav>`;
你也可以写个小帮手来解决这个问题:
//"Rules" to convert any value into a string
const string = value => Array.isArray(value) ?
value.map(string).join("") :
value == null || value === false ?
"" :
String(value);
//a formatter that applies these "rules" to the values in a template string
const format = (strings, ...values) => strings.reduce((result, tpl, index) => result + string(values[index-1]) + tpl);
let example = format `here comes the Array:
<ul>${ [1,2,3,4,5].map(v => v&1? `<li>${v}</li>`: v*2) }</ul>
some more text ${1 < 2 && 'conditional text'} rest`;
console.log(example);
.as-console-wrapper{top:0;max-height:100%!important}
显然,您不应该将此示例作为如何构建此类模板的示例,而应该尝试使用模板字符串和标记函数
我正在做一个爱好项目来制作一个站点生成器,该站点生成器使用 json 文件读取使用节点 fs-extra 模块,然后将该数据传递到一个函数中,该函数构建一个 html 文件使用模板文字,但我的 html 中一直有一堆逗号。有谁知道为什么会发生这种情况,或者可以帮助我找到解决方案来解决这个问题?
使用fs包写入文件
<nav>
${
`<ul class='nav-list'>
${navList.map(navItem =>{
return (`<li>
<a href="${
navItem.folder+"/" + navItem.title +".html"
}">
${navItem.navTitle}
</a>
<li>`)
})}
</ul>
`
}
</nav>
这是它输出的带有额外逗号的 HTML - 我有另一个这样的例子,它有更多带有相同逗号问题的标签(为简单起见添加了这个) 输出:
<nav>
<ul class='nav-list'>
<li>
<a href="./root/Index.html">
Home
</a>
<li>,<li>
<a href="./section1/Index2.html">
Section1
</a>
<li>
</ul>
</nav>
这是我在映射上面记录 navList 时我的终端输出的内容 (在 JSON.parse() 之后)
[ { title: 'Index', folder: 'root', navTitle: 'Home' },
{ 标题:'Index2',文件夹:'section1',导航标题:'Section1' } ]
在此先致谢(不在代码块中的上述行是代码块的一部分)
这些逗号来自数组到字符串的隐式转换。如果你不想要这些逗号,你应该明确地将数组转换为你想要的字符串 (join(""))
Would you do this before passing it into the function? Or In the template literal somehow?
我会这样写:
const renderNavItem = ({folder, title, navTitle}) => `<li>
<a href="${folder}/${title}.html">${navTitle}</a>
<li>`;
const renderNav = (items) => `<nav>
${items.map(renderNavItem).join("\n")}
</nav>`;
你也可以写个小帮手来解决这个问题:
//"Rules" to convert any value into a string
const string = value => Array.isArray(value) ?
value.map(string).join("") :
value == null || value === false ?
"" :
String(value);
//a formatter that applies these "rules" to the values in a template string
const format = (strings, ...values) => strings.reduce((result, tpl, index) => result + string(values[index-1]) + tpl);
let example = format `here comes the Array:
<ul>${ [1,2,3,4,5].map(v => v&1? `<li>${v}</li>`: v*2) }</ul>
some more text ${1 < 2 && 'conditional text'} rest`;
console.log(example);
.as-console-wrapper{top:0;max-height:100%!important}
显然,您不应该将此示例作为如何构建此类模板的示例,而应该尝试使用模板字符串和标记函数