トラック
/
JavaScript
JavaScript
/
演習
/
特注の看板
特注の看板

特注の看板

学習演習

はじめに

JavaScriptでは、_テンプレート文字列_を使うと、文字列の中に式を埋め込むことができます。これは文字列補間とも呼ばれます。この機能は、組み込みのグローバルオブジェクトStringの機能を拡張したものです。

JavaScriptでは、テキストをバッククォートで囲むとテンプレート文字列を作成できます。テンプレート文字列では、テキストに改行やその他の特殊文字を含められるだけでなく、変数やその他の式を埋め込むこともできます。

const num1 = 1;
const num2 = 2;

`Adding ${num1} and ${num2} gives ${num1 + num2}.`;
// => Adding 1 and 2 gives 3.

上の例では、バッククォート(``)を使ってテンプレート文字列を表しています。${...}は、置換に使われるプレースホルダーです。文字列以外の型は_暗黙的に_文字列へ変換されます。この内容は型変換のコンセプトで扱っています。テンプレート文字列には、あらゆる種類の式を使うことができます。

const track = 'JavaScript';

`This track on exercism.org is ${track.toUpperCase()}.`;
// => This track on exercism.org is JAVASCRIPT.

文字列を複数行にわたって整形したいときは、次のように書きます。

`This is an example of using template
strings to accomplish multiple
lines`;

置換の機能を使えば、出力する文字列をどうするかを決めるロジックを組み込むこともできます。

その一例が、三項演算子の埋め込みです。この演算子は、if/else文を短く書くための書き方です。構文はcondition ? consequent-expression : alternative-expressionです。条件が真とみなされる場合は、コロンの左側のオペランドが返されます。そうでなければ、三項演算子の結果はコロンの右側のオペランドになります。

const grade = 95;

`You have ${grade > 90 ? 'passed' : 'failed'} the exam.`;
// => You have passed the exam.

説明

この演習では、看板会社が看板用のカスタムメッセージを作成するためのコードを書きます。

1. 行事の看板を作る

文字列をoccasion仮引数として、誰かの名前を保持する文字列をname仮引数として受け取る関数buildSign(occasion, name)を実装します。2つの仮引数はテンプレート文字列に埋め込まれ、看板に表示するメッセージを出力します。

buildSign('Birthday', 'Rob');
// => "Happy Birthday Rob!"

2. 誕生日の看板を作る

年齢を受け取り、その年齢に基づいて看板のメッセージの一部を決める関数buildBirthdaySign(age)を実装します。年齢が50以上なら、看板ではその人を_mature_と呼び、そうでなければ_young_と呼びます。期待される正確な出力は次のとおりです。

buildBirthdaySign(50);
// => "Happy Birthday! What a mature fellow you are."

buildBirthdaySign(45);
// => "Happy Birthday! What a young fellow you are."

3. 卒業式の看板を作る

名前を文字列の仮引数として、年を数値の仮引数として受け取り、文字列補間を使って、メッセージの2行を改行で区切る看板用のフレーズを作る関数graduationFor(name, year)を実装します。

graduationFor('Hannah', 2022);
/* => "Congratulations Hannah!
       Class of 2022"
*/

4. 看板の費用を計算する

看板の内容を保持する文字列と、通貨を表す文字列を受け取る関数costOf(sign, currency)を実装します。看板の基本料金は、指定された通貨で20です。さらに、文字ごとに2かかります。(空白も計算に含まれます。)戻り値には、看板を作成する費用が含まれ、小数点以下2桁で表記し、その後に通貨文字列を続けます。

costOf('Happy Birthday Rob!', 'dollars');
// => "Your sign costs 58.00 dollars."
GitHubで編集する リンクは新しいウィンドウまたはタブで開きます
JavaScript Exercism

特注の看板を始める準備はできましたか?

Exercismに登録すれば、37個のコンセプト159個の演習、そして本物の人間によるメンタリングとともに、JavaScriptを学んでマスターできます。すべて無料です。