スキルテスト: 文字列
このスキルテストの目的は、テキストの扱い — JavaScript での文字列および便利な文字列メソッドの記事を理解しているかどうかを評価することです。
メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
文字列 1
最初の文字列の課題では、小さなことから始めましょう。すでに quoteStart という変数の中に有名な引用文の半分があります。
この課題を完成させるには、次のようにしてください。
- 引用の残りの半分を調べて、それを例の
quoteEndという変数に追加しましょう。 - 2 つの文字列を連結して、完全に引用を格納した単一の文字列にします。その結果を
finalQuoteという名前の変数に保存しましょう。 - この点で エラーが発生することがわかります。
quoteStartの問題を修正し、完全な引用が正しく表示されるようにできますか？
js
const quoteStart = 'Don't judge each day by the harvest you reap ';
// ここにコードを追加
// 以下のコードは編集しないでください。
const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = finalQuote;
section.appendChild(para1);
ここをクリックすると、模範解答を表示します。
最終的な JavaScript は次のようになります。
js
// 引用符をエスケープする必要があります
const quoteStart = 'Don\'t judge each day by the harvest you reap ';
const quoteEnd = "but by the seeds that you plant.";
const finalQuote = `${quoteStart}${quoteEnd}`;
// 以下のコードは編集しないでください。
// ...
文字列 2
この課題では、 2 つの文字列を格納する quote と substring という 2 つの変数が設定されています。
この課題を完成させるには、次のようにしてください。
- quote の長さを取得し、それを
quoteLengthという変数に格納しましょう。 substringがquoteの中で現れるインデックスの位置を探し、その値をindexという変数に格納しましょう。- これらの変数を組み合わせを使用して、変数と利用できる文字列プロパティ/メソッドを組み合わせて、元の引用文を "I do not like green eggs and ham." に切り詰め、
revisedQuoteという変数に格納しましょう。
js
const quote = "I do not like green eggs and ham. I do not like them, Sam-I-Am.";
const substring = "green eggs and ham";
// 以上のコードは編集しないでください。
// ここにコードを追加
// 以下のコードは編集しないでください。
const section = document.querySelector("section");
section.innerHTML = " ";
const para1 = document.createElement("p");
para1.textContent = `The quote is ${quoteLength} characters long.`;
const para2 = document.createElement("p");
para2.textContent = revisedQuote;
section.appendChild(para1);
section.appendChild(para2);
ここをクリックすると、模範解答を表示します。
最終的な JavaScript は次のようになります。
js
// ...
// 以上のコードは編集しないでください。
const quoteLength = quote.length;
const index = quote.indexOf(substring);
const revisedQuote = quote.slice(0, index + substring.length + 1);
// 以下のコードは編集しないでください。
// ...
文字列 3
次の文字列の課題では、前回仕上げたものと同じ引用文が指定されていますが、ちょっとおかしいです。このように修正して更新してください。
この課題を完成させるには、次のようにしてください。
- 大文字小文字を正しい文になるよう変更しましょう（最初の文字を大文字にする以外はすべて小文字にしましょう）。新しい引用文を
fixedQuoteという変数に格納しましょう。 fixedQuoteでは、 "green eggs and ham" を、あなたが実際に嫌いな別の食べ物に置き換えてください。- もう一つ小さな修正があります。引用文の末尾にピリオドを追加し、最終版を
finalQuoteという変数に保存しましょう。
js
const quote = "I dO nOT lIke gREen eGgS anD HAM";
// 以上のコードは編集しないでください。
// ここにコードを追加
// 以下のコードは編集しないでください。
const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = finalQuote;
section.appendChild(para1);
ここをクリックすると、模範解答を表示します。
最終的な JavaScript は次のようになります。
js
// ...
// 以上のコードは編集しないでください。
let fixedQuote = quote.toLowerCase();
const firstLetter = fixedQuote.slice(0, 1);
fixedQuote = fixedQuote.replace(firstLetter, firstLetter.toUpperCase());
fixedQuote = fixedQuote.replace("green eggs and ham", "pickled onions");
const finalQuote = `${fixedQuote}.`;
// 以下のコードは編集しないでください。
// ...
文字列 4
最後の文字列の課題では、定理の名前、 2 つの数値、不完全な文字列（追加が必要な部分はアスタリスク (*) で示されています）が与えられています。文字列の値を以下のように変更してください。
この課題を完成させるには、次のようにしてください。
- 通常の文字列リテラルからテンプレートリテラルに変更しましょう。
- 4 つのアスタリスクを 4 つのテンプレートリテラルのプレースホルダーに置き換えてください。次のようにします。
- 定理の名前。
- 持っている 2 つの数値。
- 直角三角形の斜辺の長さを、他の 2 辺の長さが指定された 2 つの値と同じであるとして求めたもの。現在ある値から計算する方法を見ていく必要があります。プレースホルダーの中で計算してください。
js
const theorem = "Pythagorean theorem";
const a = 5;
const b = 8;
// 以上のコードは編集しないでください。
// Edit the string literal
const myString =
"Using *, we can work out that if the two shortest sides of a right-angled triangle have lengths of * and *, the length of the hypotenuse is *.";
// 以下のコードは編集しないでください。
const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = myString;
section.appendChild(para1);
ここをクリックすると、模範解答を表示します。
最終的な JavaScript は次のようになります。
js
// ...
// 以上のコードは編集しないでください。
const myString = `Using ${theorem}, we can work out that if the two shortest sides of a right-angled triangle have lengths of ${a} and ${b},
the length of the hypotenuse is ${Math.sqrt(a ** 2 + b ** 2)}.`;
// 以下のコードは編集しないでください。
// ...