模板文字插值打断空白表
Template literal interpolation breaks whitespace table
在使用模板文字时,我注意到表格式存在问题。
当做这样的事情时:
var hello = 'Hello',
bye = 'Goodbye';
console.log(`
${hello} World
${bye} World
`);
因为{bye}部分比"再见"少了四个字母,所以字符串打印为:
Hello World
Goodbye World
对于数组或对象的插值,这会变得更加复杂。
我想知道是否有人找到了解决这类问题的方法。在插值期间,可以保留字符串的间隔表格式。
现在假设一个模板标记使用字符串和数组。数组用单词之间的空格连接。
var hello = 'Hello',
bye = 'Goodbye',
phrase = ['I', 'like'];
console.log(someTag`
${hello} World
${bye} World
Some things I like:
${phrase} sunsets.
${['I', 'like']} candy.
`);
以防万一,你不能告诉数组方括号、引号、美元、大括号等在插值前(视觉上)计入字符串的长度。单词之间的空格计入插值后的字符串长度。缩进会受到额外字符丢失和标记处理过程中添加字符的影响。
这个问题有一个公认的答案,但我希望看到更多的讨论。这个问题可能有不止一个答案。
您可以使用制表符来补偿单词的长度变化:
const hello = 'Hello';
const bye = 'Goodbye';
const str = `
${hello}'t World
${bye}'t World
`;
console.log(str);
document.getElementById('demo').innerText = str;
<pre id="demo"></pre>
相关文章:
- 谷歌地图的插值方法
- SVG实现的单调三次插值没有像d3这样的库
- AngularJS ngTranscluded、angular.noop和插值VS表达式
- AngularJS错误:$interpolate:$routeParams的interr插值错误
- Vue.js-插值错误-如何将样式修改为v-bind:style
- 在已插值的字符串中以角度内插变量
- 在两个值之间插值或“补间”(但不进行动画处理)
- 表达式和插入表达式的插值标记之间的差异
- Highcharts柱状图,从数据表加载时禁用插值
- 如何在d3.js中线性插值transform属性
- 使用Javascript和字符串插值更改html元素的类
- javascript中的Ruby插值在两个实例中的一个实例中不起作用
- 获取字符串中用于插值的字符索引
- unserscore,使用“;{{〃;作为插值符号,我得到了一个例外
- 在d3中,如何从SVG行中获取插值行数据
- angular.js中的静态与动态插值及其性能
- 插值浮动
- 模板文字插值打断空白表
- 使插值双三次函数在ie9中工作
- 在CSS中按半像素移动的图像插值