ความละเอียดอ่อนในการแทรกค่าตัวแปร

นอกจากการแทรกค่าคงที่ในแท็กแล้ว ยังสามารถมีข้อความอื่นๆ ได้:

function App() {
	const str = 'text';
	
	return <div>
		eee {str} bbb
	</div>;
}

ในหนึ่งแท็กสามารถแทรกค่าคงที่ได้มากเท่าใดก็ได้

function App() {
	const str1 = 'text1';
	const str2 = 'text2';
	
	return <div>
		{str1} {str2}
	</div>;
}

การแทรกค่าคงที่สามารถคั่นด้วย ข้อความใดๆ ก็ได้:

function App() {
	const str1 = 'text1';
	const str2 = 'text2';
	
	return <div>
		{str1} eee {str2}
	</div>;
}

มีโค้ดต่อไปนี้:

function App() {
	const name = 'user';
	const age  = '30';
	
	return <div>
		name: ?
		age:  ?
	</div>;
}

แทรกค่าคงที่ชื่อแทนเครื่องหมาย ? แรก และค่าคงที่อายุ - แทนเครื่องหมายที่สอง