文字で埋めて指定した文字数の文字列を作成するコードを紹介します。
概要
JavaScriptで与えた文字列の前や後ろに文字を挿入して指定した長さの文字列を作成するコードを紹介します。
文字で埋めて指定した長さの文字列を作成するメソッドに、
padStart padEnd があります。
書式
padStart
(文字列変数).padStart([作成する文字数],[長さが不足する場合に埋める文字])
padEnd
(文字列変数).padEnd([作成する文字数],[長さが不足する場合に埋める文字])
実施例
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function ExecPadStart() {
var elem_i = document.getElementById("TextInput");
var InputStr = elem_i.value;
var OutputStr = InputStr.padStart(16, "*");
var elem_o = document.getElementById("TextOutput");
elem_o.value = OutputStr;
}
function ExecPadEnd() {
var elem_i = document.getElementById("TextInput");
var InputStr = elem_i.value;
var OutputStr = InputStr.padEnd(16, "#");
var elem_o = document.getElementById("TextOutput");
elem_o.value = OutputStr;
}
</script>
</head>
<body>
<h1>文字列を指定した長さまで埋めるデモ</h1>
入力文字列<input id="TextInput" type="text" size="40" /><br />
<input type="button" value="padStart" onclick="ExecPadStart();"/>
<input type="button" value="padEnd" onclick="ExecPadEnd();"/><br/>
出力文字列<input id="TextOutput" type="text" size="40" /><br />
</body>
</html>
解説
[padStart]ボタンをクリックした際に下記のJavaScriptの関数を実行します。
入力のテキストボックスから値を受け取り、16文字に満たない場合は、"*"の文字を手前に追加して埋めます。
function ExecPadStart() {
var elem_i = document.getElementById("TextInput");
var InputStr = elem_i.value;
var OutputStr = InputStr.padStart(16, "*");
var elem_o = document.getElementById("TextOutput");
elem_o.value = OutputStr;
}
[padEnd]ボタンをクリックした際に下記のJavaScriptの関数を実行します。
入力のテキストボックスから値を受け取り、16文字に満たない場合は、"#"の文字を後ろに追加して埋めます。
function ExecPadEnd() {
var elem_i = document.getElementById("TextInput");
var InputStr = elem_i.value;
var OutputStr = InputStr.padEnd(16, "#");
var elem_o = document.getElementById("TextOutput");
elem_o.value = OutputStr;
}
実行結果
WebブラウザでHTMLファイルを開きます。
下図のページが表示されます。
上部のテキストボックスに文字列を入力します。今回は"Penguin"を入力します。
[padStart]ボタンをクリックします。入力文字列の手前に"*"が追加され16文字になります。
下部のテキストボックスには "*********Penguin" が表示されます。
[padEnd]ボタンをクリックした場合は、入力文字列の後ろに"#"が追加され、16文字になります。
下部のテキストボックスには "Penguin#########" が表示されます。
なお、入力文字列が16文字より長い場合は、入力した文字列がそのまま表示されます。
補足:第二引数に2文字を与えた場合
第二引数に2文字与えた場合でも1文字目のみで埋められます。
var OutputStr = InputStr.padEnd(16, "#$");
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-05-21
作成日: 2024-02-11
