如何使用JavaScript将字符串显示为下标?


在本教程中,我们将学习如何使用JavaScript将显示的字符串更改为下标。下标字符串是指以小字号显示在另一个字符串之后并悬挂在下面的字符串。例如,在Astart中,“start”就是下标字符串,它以小字号显示在A之后并悬挂在下面。

下标在许多领域都有应用,例如数学、化学等。它常用于表示化学名称。例如,H2、N2、O2等。此外,我们还可以将其用于数学中,表示诸如X2、A2等符号。

在这里,我们将学习如何使用HTML和JavaScript同时将字符串表示为下标。

仅使用HTML显示下标字符串

在我们学习使用JavaScript将字符串显示为下标之前,我们应该学习如何使用原始HTML呈现下标字符串。HTML包含<sub>标签。程序员在<sub>标签内放置的任何字符串都将显示为下标字符串。

语法

我们可以遵循以下语法来使用<sub>标签。

<p> A <sub> start </sub> </p> // output is Astart

示例

在下面的示例中,我们使用了HTML <sub>标签来渲染一些数学和化学公式。此示例仅用于演示<sub>标签。

<html> <head> </head> <body> <h2> displayed string as a subscript using JavaScript. </h2> <h4> Various examples of subscript string using Raw HTML. </h4> <p> A <sub> start </sub> </p> <p> X<sub>2 </sub> </p> <p> CO<sub>2 </sub> </p> <p> C<sub>12 </sub> H<sub>22 </sub> O<sub>11 </sub> </p> </body> </html>

在输出中,用户可以看到我们是如何使用<sub>标签编写化学公式的。

使用HTML和JavaScript显示下标字符串

我们在上一节中学习了如何仅使用HTML将字符串显示为下标。在本节中,我们将使用JavaScript的`string.sub()`方法。`string.sub()`方法也返回原始HTML,我们可以将其添加到HTML的主体中。

语法

let string = “24”;
let result = “x” + string.sub(); // convert string variable to subscript.
let result = “x” + “24”.sub(); // use direct string with sub() method 

返回值

`string.sub()`方法返回包含在<sub> HTML标签内的字符串。

<sub> string <sub>

示例

在下面的示例中,我们使用了JavaScript `sub()`方法将字符串显示为下标。我们使用`sub()`方法创建了各种化学公式,并在输出中呈现它们。

<html> <head> </head> <body> <h2> Displayed string as a subscript using JavaScript. </h2> <div id = "subscript"> </div> <div id = "deprecated"> <br>The String sub() method is deprecated. So use sub tag. <br></div> </body> <script> var subscript = document.getElementById("subscript"); let string = "3"; let checmical_formula = "HCO" + string.sub(); var str = "<sub>Demo Text</sub>"; subscript.innerHTML = checmical_formula + "<br/>"; checmical_formula = "Cr" + "2".sub() + "O" + "7".sub()+ "<br/>"; subscript.innerHTML += checmical_formula; deprecated.innerHTML += "<br>This is subscript" + str; </script> </html>

注意 - `string.sub()`方法已弃用,因此请使用sub标签。

我们已经学习了如何使用JavaScript将字符串渲染为下标。当我们需要使用HTML和JavaScript或仅使用HTML将数学符号、问题、化学公式等写入网页时,这非常有用。

更新于:2022年8月2日

3K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告