反引号字符以在javascript中创建字符串模板

时间:2018-10-22 14:57:07

标签: javascript angularjs typescript templates

我正在尝试使用动态结果集格式化字符串。 m使用backtick(template)运算符,但仅使用一个控制杆。由于我们具有复杂的嵌套数据结构,因此很难使用模板格式化嵌套级字符串。

实际回报:

"formattedSting": "format1 ${a}, ${b}, ${c}"

预期输出:

"formattedSting": "format1 av1, bv1, cv1"

任何想法都可以在没有评估或简单替换方法的情况下解决此问题。

// mockSteps - coming from static ts file and m not able to replace quot(") with backtick(`)
mockSteps = {
	'steps': [{
		'id': 1,
		'format': "format1 ${a}, ${b}, ${c}"
	},{
		'id': 2,
		'format': "format2 ${a}, ${c}"
	},{
		'id': 3,
		'format': "format3 ${b}, ${a}"
	}]
};
 
list = [
  {a:'av1',b:'bv1',c:'cv1'},  
  {a:'av2',b:'bv2',c:'cv2'}
];

resultList = [];
list.forEach((lst) => {
			const {a, b, c } = lst;
			const formatObj = mockSteps['steps'][0].format;
			result = {
				keyword : '...',
				// formattedSting : eval('`' + formatObj + '`'),
        formattedSting : `${formatObj}`
			};
			resultList.push(result);
});

console.log(resultList);
 

3 个答案:

答案 0 :(得分:0)

向对象内部数组中的对象添加反引号。

mockSteps = {
    'steps': [{
        'id': 1,
        'format': `format1 ${a}, ${b}, ${c}`
    },{
        'id': 2,
        'format': `format2 ${a}, ${c}`
    },{
        'id': 3,
        'format': `format3 ${b}, ${a}`
    }]
};

答案 1 :(得分:0)

new Function()可以使用,但是基本上与eval()相同。

在这些情况下,我个人使用string.replace()

如果您不想.replace()Function(),我会选择将格式实际更改为更易于解析的内容。

const mockSteps = {
  "steps": [
    { "id": 1, "format": [ "a", "b", "c" ] },
    { "id": 2, "format": [ "a", "c" ] },
    { "id": 3, "format": [ "b", "a" ] }
  ]
};

const data = [
  {a:'av1',b:'bv1',c:'cv1'},  
  {a:'av2',b:'bv2',c:'cv2'}
];

const resultList = mockSteps.steps.reduce(( collection, item ) => {
  data.forEach( data => collection.push({
    keyword: '...',
    formattedString: `format${ item.id } ${ item.format.map( ref => data[ ref ]).join( ', ' ) }`
  }));
  return collection;
}, [] );

console.log(resultList);

答案 2 :(得分:0)

mockSteps = {
	'steps': [{
		'id': 1,
		'format': "format1 ${a}, ${b}, ${c}"
	},{
		'id': 2,
		'format': "format2 ${a}, ${c}"
	},{
		'id': 3,
		'format': "format3 ${b}, ${a}"
	}]
};
 
list = [
  {'${a}':'av1', '${b}':'bv1', '${c}':'cv1'},  
  {'${a}':'av2', '${b}':'bv2', '${c}':'cv2'}
];

resultList = [];
list.forEach((lst) => {
      let formatObj = mockSteps.steps[0].format;
      for(let key of Object.keys(lst)) {
      	formatObj = formatObj.replace(key, lst[key]);
      }

      result = {
	keyword : '...',
	formattedSting : `${formatObj}`
      };
     resultList.push(result);
});

console.log(resultList);

这是您可以使用的方法之一,在这里,我只是将list对象键名更改为我们需要替换的对象键,然后在循环中添加了list对象键并将匹配的结果替换为值