https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/pad-start-to-format-a-character-string-to-a-specified-length-with-javascript/
https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/pad-start-to-format-a-character-string-to-a-specified-length-with-javascript/

JavaScriptで文字列を指定の長さになるように整形するpadStart()メソッドとpadEnd()メソッド()の使い方

padEnd()メソッドとpadStart()メソッドを利用すると、文字列が指定の長さになるように整形することが出来ます。

構文

メソッド意味返り値
文字列.padStart(繰り返しの長さ,[追加]する文字列(省略可能))文字列の冒頭に指定の数だけ文字列を追加する文字列
文字列.padEnd(繰り返しの長さ,[追加]する文字列(省略可能)) 文字列の末尾に指定の数だけ文字列を追加する 文字列
padStart() padEnd()メソッド

サンプルコード

サンプル1 (経過タイマー)

このメソッドを利用したサンプルコードとして、ページ開いてから9秒までをカウントするコードを紹介します。

Output
padStartを使った例(1から9秒まで数える)
padStartを使わなかった例(1から9秒まで数える)
Pug
.container.my-5
	div#timer
		div#second
	table.table
		tr
			th padStartを使った例(1から9秒まで数える)
			td#test_result1
		tr
			th padStartを使わなかった例(1から9秒まで数える)
			td#test_result2
CSS
#test_result1 {
	width: 100px;
}
JavaScript
/* テキストエリア */
const elapsedTimeText1 = document.getElementById( 'test_result1' );
const elapsedTimeText2 = document.getElementById( 'test_result2' );

/*現在の時刻を取得する*/
const startTime = new Date().getTime();

timeUpdate();

/** 毎フレーム実行される関数 */
function timeUpdate() {
  // 現在時刻
  let currentTime = new Date().getTime();
	//経過時間を取得
	const elapsedTime = currentTime - startTime;
  // 秒の表示。小数点
  elapsedTimeText1.textContent = ( elapsedTime / 1000 ).toFixed( 0 ).padStart( 2, '0' );
	elapsedTimeText2.textContent = ( elapsedTime / 1000 ).toFixed( 0 );
  // 次のフレームで再度timeupdate()を実行する(ただし、9秒で止める)
	if ( '9' !== ( elapsedTime / 1000 ).toFixed( 0 ) ) {
		requestAnimationFrame( timeUpdate );
	}
}

サンプル2(デジタル時計)

もう一つの例として、このメソッドを使ってデジタル時計の表示を再現します。

Output
::
Pug
.container.my-5
	div#watch
		span#hourTarget
		span :
		span#minuteTarget
		span :
		span#secondTarget
SCSS
#watch {
	font-weight: bold;
  width: 100%;
  height: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 100px;
	span {
		width: auto;
	}
}
JavaScript
const hourTarget = document.getElementById( 'hourTarget' );
const minuteTarget = document.getElementById( 'minuteTarget' );
const secondTarget = document.getElementById( 'secondTarget' );

/*現在の時刻を取得する*/
watchUpdate();

/** 毎フレーム実行される関数 */
function watchUpdate() {
  // 現在時刻(時・分・秒)で取得
  const currentTime = new Date();
	const hour = currentTime.getHours();
	const minute = currentTime.getMinutes();
	const second = currentTime.getSeconds();
  // 秒の表示。小数点
  hourTarget.textContent = String(hour).padStart( 2, '0' );
	minuteTarget.textContent = String(minute).padStart( 2, '0' );
	secondTarget.textContent = String(second).padStart( 2, '0' );
  // 次のフレームで再度watchUpdate()を実行する
	requestAnimationFrame( watchUpdate );
}
インストラクター
コメント

コメントを残す