JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのsub()メソッドで文字列を下付き文字として表示する方法

JavaScriptで文字列を下付き文字（subscript）として表示するには、sub()メソッドを使用します。このメソッドは、対象の文字列が <sub> タグで囲まれているかのように、HTML文字列を生成して返します。

sub()メソッドとは

sub()はStringオブジェクトに用意されているメソッドの一つで、呼び出した文字列を <sub>〜</sub> の形式に変換します。戻り値はあくまでHTML文字列なので、そのまま画面に出力するとブラウザによって下付き文字として描画されます。

サンプルコード

以下のコードを実行すると、文字列「Demo Text」が下付き文字として表示されます。

<html>
<head>
  <title>JavaScript String sub() Method</title>
</head>

<body>
  <script>
    var str = new String("Demo Text");
    document.write("This is subscript: " + str.sub());
  </script>
</body>
</html>

実行結果の出力イメージ

上記のスクリプト部分は、内部的に次のようなHTMLを出力します。

This is subscript: <sub>Demo Text</sub>

注意点：sub()メソッドは非推奨

sub()メソッドは、ECMAScript仕様のAnnex Bに含まれるレガシー機能であり、現在では非推奨（deprecated）とされています。また、サンプルコードで使用している document.write() も、ページの読み込みを妨げるなどの理由から現代の開発では避けるべき手法です。

実際のWeb制作では、HTML側で直接 <sub> タグを記述するか、CSSの vertical-align: sub; を使ってスタイルを制御する方法が推奨されます。既存コードの保守時には、これらの代替手段への置き換えを検討しましょう。

  1. JavaScriptで確認ダイアログのボタンラベルを変更する方法【jQuery＋CSS】

    JavaScriptの標準機能であるconfirm()メソッドは手軽に使える一方で、ボタンのラベルはブラウザ側で固定されており、「OK」や「キャンセル」以外のテキストに変更することはできません。ボタンのラベルを自由にカスタマイズしたい場合は、jQueryとCSSを組み合わせて独自の確認ダイアログを作成するのが効果的です。以下のコードは、標準の確認ボックスとは異なるボタンラベルを持つ確認ダイアログを実装した例です。サンプルコード<!DOCTYPE html> <html> <head> <script src=https://aj

  2. JavaScriptでページを印刷するにはどうすればよいですか？

    JavaScriptでページを印刷するには、print()メソッドを使用します。このメソッドを呼び出すと、ブラウザの標準的な印刷ダイアログボックスが開き、どのプリンターを使用するか、部数はいくつにするかといった印刷オプションを簡単に設定できます。以下は、実際に印刷ダイアログが表示された様子の例です。サンプルコード次のコードを実行すると、ボタンをクリックするだけでページを印刷できる動作を確認できます。<!DOCTYPE html> <html>     <body>     &nb