https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/change-string-to-uppercase-touppercase-lowercase-tolowercase-with-javascript/
https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/change-string-to-uppercase-touppercase-lowercase-tolowercase-with-javascript/

JavaScriptで文字列を大文字(toUpperCase())・小文字(toLowerCase())に変更する方法

JavaScriptで出力された文字列を整形する目的で、文字列を大文字に変換したり、逆に小文字に変換する場面があります。

構文

メソッド意味返り値
文字列,toLowerCase()文字列を小文字に変換する文字列
文字列,toUpperCase()文字列を大文字に変換する文字列
toLowerCase() toUpperCase()メソッド

サンプルコード

サンプルコードとして、文字列「JavaScript」をそのまま出力した状態の物、大文字・小文字にそれぞれ変換して出力したサンプルコードを紹介します。

Output
元々のテキスト
toLowerCase()
toUpperCase()
Pug
.container.my-5
	table.table
		tr
			th 元々のテキスト
			td.result1
		tr
			th toLowerCase()
			td.result2
		tr
			th toUpperCase()
			td.result3
JavaScript
const targetString = 'JavaScript';

document.querySelector('.result1').textContent = targetString;
document.querySelector('.result2').textContent = targetString.toLowerCase();
document.querySelector('.result3').textContent = targetString.toUpperCase();

下記の入力枠にお好きなテキストを入力して、テストしてみてください。

Output
オリジナル
toLowerCase()
toUpperCase()
Pug
textarea#demo-textarea
	table.table
		tr
			th オリジナル
			td.output_string_original
		tr
			th toLowerCase()
			td.output_string_upper
		tr
			th toUpperCase()
			td.output_string_lower
CSS
textarea#demo-textarea {
	width: 100%;
}
JavaScript
/* テキストエリア */
const textarea = document.getElementById( 'demo-textarea' );

/* 入力中の値を出力するための.classを取得*/
const output_string_original = document.querySelector( '.output_string_original' );
const output_string_upper = document.querySelector( '.output_string_upper' );
const output_string_lower = document.querySelector( '.output_string_lower' );


//テキストを入力居する度にonKeyUp()を実行
textarea.addEventListener('keyup', onKeyUp);

function onKeyUp() {
	// 入力テキスト
	const inputText = textarea.value;
	//オリジナルテキスト
	output_string_original.textContent = inputText;
	//文字列を小文字に変換
	output_string_lower.textContent = inputText.toLowerCase();
	//文字列を大文字に変換
	output_string_upper.textContent = inputText.toUpperCase();
}
インストラクター
コメント

コメントを残す