[JavaScript]テンプレート変数

テンプレート文字

ES 6以前は、ES 6ではテンプレート文字列と呼ばれていた.ES 6が文字列を挿入する方法を理解します!

テンプレート・ライブラリは、式/文字列の挿入、複数行文字列、文字列フォーマット、文字列タグなど、さまざまな機能を提供するネストされた式を可能にする文字列ライブラリです.

1.文字列の挿入

ES 6の前に、次の文字列が挿入されています.

let name = 'Hojun';
let greeting = 'Hello my name is ' + name ;

console.log(greeting);		// Hello my name is Hojun

ES 6からbacktic(`)を使用すると、以下のように簡単に記述できます.

let name = 'Hojun';
const greeting = 'Hello my name is ${name}';

console.log(greeting);		// Hello my name is Hojun

2.式の挿入

ES 6の前に、式を挿入するために、次のコードが記述されています.

let a = 1;
let b = 10;
console.log('1 * 10 is ' + (a * b));		// 1 * 10 is 10

ES 6では、backticを使用して以下のコードを簡単に記述できます.

let a = 1;
let b = 10;
console.log(`1 * 10 is ${a * b}`);		// 1 * 10 is 10

3.複数行文字列の生成

ES 6より前に、HTMLタグなどに使用される複数行の文字列をバックスラッシュバーで以下のように記述しています.

let text = "Hello, \
my name is Alberto \
how are you? \ ";

ES 6では、白金で地方全体を包むだけで、白石地獄を経験する必要はありません!

let text = `Hello, 
my name is Alberto 
how are you?`;

4.ネストテンプレート

以下に示すように、テンプレート内にテンプレートをネストすることも簡単になります.

const people = [{
  name: 'HOJUN 1',
  age: 27,
}, {
  name: 'HOJUN 2',
  age: 28,
}, {
  name: 'HOJUN 3',
  age: 29,
}
]; 


const markup = `
<ul>
	${people.map(person => `<li>  ${person.name}  </li>`)}
</ul>
`;

console.log(markup);

// <ul>
//   <li> HOJUN 1 </li>,<li> HOJUN 2 </li>, <li> HOJUN 3 </li>
// </ul>

において、map関数を用いてヒトの各要素に対して繰り返し動作を実行し、ヒト内のnameでliタグを表す.

5.3つの演算子を追加

の3つの演算子を使用すると、テンプレート文字列に論理を簡単に追加できます.3つの演算子の基本構文は次のとおりです.

const isDiscounted = false;

function getPrice() {
  console.log(isDiscounted ? "$10" : "$20");
}

getPrice();		// $20

は、3つの演算子を使用して記述できます.

// name, age와 함께 artist 객체 생성
const artist = {
  name: "HOJUN",
  age: 27,
};

// artist 객체에 song 프로퍼티가 있을 때만 문장에 추가하고, 
// 없으면 아무것도 반환하지 않는다.

const text = `
	<div>
	  <p> ${artist.name} is ${artist.age} years old ${artist.song ?
              `and wrote song ${artist.song}` : '' }
	  </p>
	</div>
`;

// <div>
//   <p> HOJUN is 27 years old
//   </p>
// </div>

const artist = {
  name: "HOJUN",
  age: 27,
  song: 'Love',
};

// <div>
//   <p> HOJUN is 27 years old and wrote the song Love
//   </p>
// </div>

6.関数をテンプレート文字に渡す
次の例

に示すように、必要に応じてテンプレートに関数を渡すこともできます.(第

部)

const groceries = {
  meat: "pork chop",
  beggie: "salad",
  fruit: "apple",
  others: ['mushrooms', 'instant noodles', 'instant soup'],
};

// groceries의 각 값에 대해 map()을 수행하는 함수
function groceryList (others) {
  return `
	<p>
	  ${toehrs.map( other => ` <span>${other}</span>`).join('\n')}
	</p>
  `;
}

// p 태그 내 모든 groceries를 출력. 마지막은 others 배열의 모든 원소를 포함한다.

const markup = `
	<div>
	  <p>${groceries.meat}</p>
	  <p>${groceries.veggie}</p>
	  <p>${groceries.fruit}</p>
	  <p>${groceryList(groceries.others)}</p>
	</div>
`;

//  <div>
//	  <p>pork chop</p>
//	  <p>salad</p>
//	  <p>apple</p>
//	  <p>
//	     <p>
//		<span>mushrooms</span>
//		<span>instant noodles</span>
//		<span>instant soup</span>
//	     <p>
//	  <p>
//  </div>

の最後のpタグでは、関数groseryListを呼び出し、他のすべてのパラメータをinnerに渡す.

7.タグ付きテンプレート文字

関数をタグ付けしてテンプレートテキストを実行すると、テンプレート内のすべての項目がタグ関数の引数として提供されます.

仕事のやり方は簡単だ.実行するテンプレートに関数名を書き込むだけで...?

let person = "HOJUN";
let age = 27;

function myTag(strings, personName, personAge) {
  // strings: ["That ", " is a ", "!"]
  let str = string[1];		// " is a "
  let ageStr;
  
  personAge > 50 ? ageStr = "grandpa" : ageStr = "youngster";
  
  return personName + str + ageStr;
}

let sentence = myTag`That ${person} is a ${age}!`;

console.log(sentence);		// HOJUN is a youngster

上記の例では、myTag関数の最初のパラメータstringは、let文の文字列全体にテンプレート変数以外の文字列の配列が含まれ、テンプレート変数が残りのパラメータになるように設定されています.

さらに説明すると、string配列の各要素は、テンプレートテキストに含まれる変数を区切り文字として文字列を区切った結果である.
文字列は、That、${person}、is a、${age}、!この5つの部分は,変数を除いて["That","is a","!]文字列になります.

の場合、中央の文字列には、整列マーキング法を使用してアクセスできます.

let str = strings[1];		// " is a "