символ backtick для создания строкового шаблона в javascript

Question

Я пытаюсь отформатировать строку с динамическим набором результатов.Я использую оператор backtick (шаблон), но он работает только с одним рычагом.поскольку у нас сложная структура вложенных данных, сложно форматировать вложенную строку уровня с помощью шаблона.

Фактический результат:

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

Ожидаемый результат:

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

Любая идея, какрешить эту проблему без eval или простого метода замены.

// 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);
 

Answer 1

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);

Answer 2

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ключи в цикле и заменяют совпавшие результаты значениями

Answer 3

Добавление обратных галочек к объекту внутри вашего массива внутри вашего объекта.

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