JavaScript のティッカー関数を理解する: その仕組みと詳細な説明

JavaScript のティッカー関数を理解する

ティッカーは、デジタル サイネージ アプリケーションやプロモーション メディアとしてよく使用されるテキストを実行します。このテキストには、ニュース、広告、お知らせなどの情報を注意を引く方法で表示できます。実行テキストは通常​​、HTML と CSS で実装され、JavaScript なしで操作できますが、多くのソフトウェアでも、スケジュールと制御を向上させるためにこの機能が提供されています。

この記事では、JavaScript でティッカー関数がどのように機能するかについて説明します。これは Codewars のチャレンジで見つけました。この関数を使用すると、JavaScript を使用してスクロール テキスト効果を作成できます。

ティッカーとは何ですか?

ティッカーは水平に移動するテキストであり、最新のニュース、お知らせ、広告など、継続的に更新される情報を表示するためにさまざまなアプリケーションでよく使用されます。これらの効果はデジタル画面や電子掲示板で見ることができ、通常は HTML、CSS、JavaScript を使用して実装できます。

以下で説明する JavaScript のティッカー関数は、Web アプリケーションで動的に実行されるテキスト効果を作成するためのソリューションを提供します。

次に説明するティッカー関数のコードを示します。

const ticker = (text, width, tick) => {
  const display = ' '.repeat(width);  // 1
  text = display + text + display;    // 2
  tick = tick % (text.length - width); // 3
  return text.slice(tick, tick + width); // 4
}

ティッカー機能の説明

この関数には 3 つのパラメータがあります:

• text: 表示するテキスト。
• width: 希望する表示幅、つまり一度に表示される文字数。
• ティック: テキストのシフト位置。関数が呼び出されたときにどのテキストが表示されるかを決定します。

以下は、この関数の各ステップの技術的な説明です:

---

1.テキストを折り返すスペースを作成する

const display = ' '.repeat(width);

最初のステップでは、repeat() メソッドを使用して、幅と同じ大きさのスペースを含む空の文字列を作成します。 repeat() 関数は、指定された文字 (この場合はスペース) を width で指定された回数繰り返します。

例:
幅が 5 の場合、表示変数には 5 つのスペースで構成される文字列 ' ' が含まれます。

2.テキストの周囲にスペースを追加する

text = display + text + display;

2番目のステップでは、テキスト(テキスト)の前後に表示文字列(スペース)を追加します。これにより、テキストの両側に空きスペースが確保され、テキストが切り取られることなく移動 (スクロール) できる場所が提供されます。

例:
指定されたテキストが「Hello」で幅が 5 であるとします。この行の後のテキストは次のようになります:

const ticker = (text, width, tick) => {
  const display = ' '.repeat(width);  // 1
  text = display + text + display;    // 2
  tick = tick % (text.length - width); // 3
  return text.slice(tick, tick + width); // 4
}

これにより、テキストの左右に十分な空きスペースができ、スムーズな移動が可能になります。

3.テキスト移動位置の計算

const display = ' '.repeat(width);

3 番目のステップでは、係数演算子 (%) を使用して、ティック値が有効な範囲内にあり、スペースで囲まれたテキストの長さを超えないことを確認します。

text.length - width の値は、折り返されたテキストの全長 (スペースを含む) から、表示したい表示の幅 (width) を引いたものになります。これにより、目盛りで指定されたテキストのシフトが表示可能なテキストの長さを超えないようになります。

例:
スペースを追加した後のテキストの長さが 15 (たとえば、' Hello ')、幅が 5 の場合、 text.length - width は 10 になります。つまり、目盛りが範囲内にあることを確認するだけで済みます。 0 ～ 9。これにより、テキストの動きが欠落することなく常に有効であることが保証されます。

4.表示する部分文字列を取得します

text = display + text + display;

最後のステップでは、slice() メソッドを使用して、目盛りの位置から目盛りの幅の位置までのテキスト文字列の一部を取得します。 lice() 関数は、その位置に対応する文字列の部分を返します。

例:
たとえば、tick = 3 および width = 5 の場合、コード slide(3, 8) は文字列 ' Hello ' から部分文字列 'Hello' を生成します。

このようにして、幅に合わせた長さのテキストの一部を表示します。この関数が異なるティック値で呼び出されるたびに、表示されるテキストが移動し、動きやスクロール効果が生まれます。

---

ティッカー機能の使用例

コードでこの関数を使用する例を見てみましょう:

'     Hello     '

発生するプロセスは次のとおりです:

1. display = ' ' (スペース 5 個)。
2. 変更されたテキスト:「Hello World」。
3. 目盛りの値 = 3、折り返し後のテキストの長さは 18 です。幅 = 5 の場合、目盛りの範囲は 0 ～ 13 であることがわかります。
4. slice(3, 8) 関数は部分文字列 'Hello' を返します。

次の呼び出しで目盛り値を増やすと、テキストがさらに移動し、表示されるテキストの部分が変更されます。

テキストはどのように移動できますか?

ティッカー関数を呼び出すたびにティック値が変化するため、動きのエフェクトが作成されます。目盛りの値が増加すると、表示されるテキストの部分も変化します。これにより、目盛りがテキストを動的にスクロールするため、動きの効果が得られます。

この効果をさらにテストするには、定期的にティック値を増やしてループ内でティッカー関数を呼び出します。たとえば、setInterval() を使用して数秒ごとに表示を更新します。

---

同様のチャレンジに興味がある場合は、私は Codewars を通じてこの関数を発見しました。これは、JavaScript プログラミング スキルを向上させる楽しい練習になります。

頑張ってください。この記事が JavaScript でのティッカー効果の仕組みを理解するのに役立つことを願っています。

以上がJavaScript のティッカー関数を理解する: その仕組みと詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。