JavaScript の文字列操作 | 文字列を改行するチュートリアル

はじめに

この実験では、JavaScript における文字列操作の概念を探ります。具体的には、文字列を特定の文字数に改行文字を使って改行する wordWrap 関数に焦点を当てます。この実験が終わるとき、JavaScript で文字列を操作して特定のフォーマット要件を達成する方法をより深く理解しているでしょう。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("Template Literals") subgraph Lab Skills javascript/variables -.-> lab-28697{{"文字列を改行する"}} javascript/data_types -.-> lab-28697{{"文字列を改行する"}} javascript/arith_ops -.-> lab-28697{{"文字列を改行する"}} javascript/comp_ops -.-> lab-28697{{"文字列を改行する"}} javascript/template_lit -.-> lab-28697{{"文字列を改行する"}} end

文字列を改行するための指示

コーディングを練習するには、ターミナル/SSH を開いて node と入力します。

このコードは、文字列を特定の文字数に改行文字を使って改行します。それを使用するには、次の手順に従います。

String.prototype.replace() と正規表現を使って、max 文字の最も近い空白の場所に指定された改行文字を挿入します。
3番目の引数 br に対して '\n' のデフォルト値を使用したくない場合は、それを省略して独自の文字を指定できます。

コードは次のとおりです。

const wordWrap = (str, max, br = "\n") =>
  str.replace(
    new RegExp(`(?![^\\n]{1,${max}}$)([^\\n]{1,${max}})\\s`, "g"),
    "$1" + br
  );

そして、それを使用する方法のいくつかの例は次のとおりです。

wordWrap(
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus.",
  32
);
// 'Lorem ipsum dolor sit amet,\nconsectetur adipiscing elit.\nFusce tempus.'

wordWrap(
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus.",
  32,
  "\r\n"
);
// 'Lorem ipsum dolor sit amet,\r\nconsectetur adipiscing elit.\r\nFusce tempus.'

まとめ

おめでとうございます！あなたは文字列を改行する実験を完了しました。あなたのスキルを向上させるために、LabExでさらに実験を練習できます。