Bagaimanakah cara menukar rentetan untuk dipaparkan sebagai superskrip menggunakan JavaScript?-tutorial js-php.cn

Bagaimanakah cara menukar rentetan untuk dipaparkan sebagai superskrip menggunakan JavaScript?

WBOY

Lepaskan： 2023-08-30 14:45:11

ke hadapan

1324 orang telah melayarinya

如何使用 JavaScript 更改要显示为上标的字符串？

Dalam tutorial ini, kita akan belajar menggunakan JavaScript untuk menukar rentetan untuk dipaparkan sebagai superskrip. Seperti namanya, rentetan superskrip muncul pada separuh ketinggian rentetan biasa. Selain itu, aksara rentetan superskrip adalah lebih kecil daripada rentetan biasa.

Rentetan superskrip mempunyai banyak kegunaan semasa menulis formula matematik. Contohnya, A², B², 10⁵, dsb. Selain itu, kami juga boleh menggunakan superskrip untuk mewakili formula kimia, seperti O ₂²-, H-, dll.

Di sini, pengguna boleh belajar untuk memaparkan rentetan sebagai superskrip menggunakan HTML atau JavaScript.

Paparkan rentetan sebagai subskrip menggunakan HTML sahaja

Dalam bahagian ini, kita akan belajar untuk memaparkan rentetan sebagai superskrip menggunakan tag HTML ^{. Sebarang rentetan yang ditulis oleh pengguna dalam teg HTML akan dipaparkan dalam aksara kecil pada ketinggian separuh di atas rentetan biasa.}

Syntax

Pengguna boleh mengikut sintaks berikut untuk menjadikan rentetan sebagai superskrip menggunakan HTML sahaja.

<p> (10)<sup> 2</sup> </p> // output is (10)2

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami menggunakan teg HTML ^{untuk memaparkan beberapa formula matematik dalam format yang betul.}

<html>
<head>
</head>
<body>
   <h2> displayed string as a superscript using JavaScript. </h2>
   <h4> Various examples of superscript string using Row HTML. </h4>
   <p> A<sup>3 </sup> </p>
   <p> A<sup>2 </sup> + B<sup>2 </sup> + 2*A*B = (A+B)<sup>2 </sup> </p>
</body>
</html>

Salin selepas log masuk

Dalam output di atas, pengguna boleh melihat cara kami menulis formula matematik menggunakan tag HTML .

Paparkan rentetan sebagai subskrip menggunakan HTML dan JavaScript

Di sini kita akan belajar tentang kaedah JavaScript string.sup(). Ia ialah kaedah perpustakaan terbina dalam yang mengembalikan rentetan yang dibenamkan dalam teg HTML ^{. Oleh itu, apabila pengguna perlu menulis rentetan secara langsung menggunakan HTML, kaedah di atas boleh digunakan, dan apabila pengguna perlu menggunakan JavaScript untuk menjana rentetan dan menulisnya ke dalam badan HTML, pengguna boleh menggunakan string.sup( ) kaedah. < /p>}

Syntax

Pengguna boleh menggunakan kaedah JavaScript string.sup() mengikut sintaks berikut. Kaedah

let str = "5";
let output = "10" + string.sup(); // returns 105
let output = "x" + "2".sup(); // returns x2

Salin selepas log masuk

Nilai Pulangan

string.sup() mengembalikan rentetan dalam teg HTML ^.

<sup> string <sup>

Salin selepas log masuk

Contoh

<html>
<head>
</head>
<body>
   <h2> displayed string as a superscript using JavaScript. </h2>
   <div id = "superscript"> </div>
   <div id = "deprecated"> <br>The String sup() method is deprecated. So use <i>sup</i> tag. <br></div>
</body>
<script>
   var superscript = document.getElementById("superscript");
   let string = "5";
   let x = 10;
   let result = x + string.sup() + " = " + Math.pow( 10, 5 ) + ". <br/>";
   superscript.innerHTML = result;
   result += "5" + "2".sup() + " = " + Math.pow( 5, 2 ) + ". <br/>";
   superscript.innerHTML = result;
   var str = "<sup>Demo Text</sup>";
   deprecated.innerHTML += "<br>This is subscript" + str;
</script>
</html>

Salin selepas log masuk

Dalam tutorial ini, kami belajar tentang memaparkan rentetan sebagai superskrip. Ini adalah ciri yang sangat berguna yang disediakan oleh HTML. Pengguna boleh terus memaparkan rentetan sebagai superskrip menggunakan teg HTML atau mereka boleh menggunakan kaedah JavaScript string.sup(), tidak mengapa kerana kaedah super() juga akan mengembalikan nilai yang sama dengan membenamkan rentetan dalam ^Menanda.

Atas ialah kandungan terperinci Bagaimanakah cara menukar rentetan untuk dipaparkan sebagai superskrip menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!