JavaScript のティッカー関數(shù)を理解する

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

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

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

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

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

次に説明するティッカー関數(shù)のコードを示します。

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
}

ティッカー機(jī)能の説明

この関數(shù)には 3 つのパラメータがあります:

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

以下は、この関數(shù)の各ステップの技術(shù)的な説明です:

---

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

const display = ' '.repeat(width);

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

例:
幅が 5 の場(chǎng)合、表示変數(shù)には 5 つのスペースで構(gòu)成される文字列 ' ' が含まれます。

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

text = display + text + display;

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

例:
指定されたテキストが「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
}

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

3.テキスト移動(dòng)位置の計(jì)算

const display = ' '.repeat(width);

3 番目のステップでは、係數(shù)演算子 (%) を使用して、ティック値が有効な範(fàn)囲內(nèi)にあり、スペースで囲まれたテキストの長(zhǎng)さを超えないことを確認(rèn)します。

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

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

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

text = display + text + display;

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

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

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

---

ティッカー機(jī)能の使用例

コードでこの関數(shù)を使用する例を見(jiàn)てみましょう:

'     Hello     '

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

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

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

テキストはどのように移動(dòng)できますか?

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

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

---

同様のチャレンジに興味がある場(chǎng)合は、私は Codewars を通じてこの関數(shù)を発見(jiàn)しました。これは、JavaScript プログラミング スキルを向上させる楽しい練習(xí)になります。

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

以上がJavaScript のティッカー関數(shù)を理解する: その仕組みと詳細(xì)な説明の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。