![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回は文字データの取得変換について勉強するッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
文字データの取得変換?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そうッピ!
具体的には文字数を数えたり、大文字や小文字、変数の最初の文字を取り出して、変換する方法ッピ!
- 文字数を数える
- 文字を大文字にする
- 文字を小文字にする
- 変数の1文字を取り出す
- 変数のAからBまでの文字を取り出す
文字データの取得変換ついて学ぼう
必要なもの
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
![メモ帳](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-01_611.jpg)
- メモ帳
- ブラウザ
が必要ッピ!
元になるコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
</script>
<!-- ここまで! -->
</body>
</html>
文字を取得する
文字やデータを入れる変数
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
さっそくやって行くッピよ~! 今回は文字数を数えるコードッピ!
let a = "Hello World";
document.write(a);
と入力するッピ!
できたらブラウザで確認してみるッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2021/09/2021-09-01_b_s7.png)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
let a = “Hello world“;
document.write(a);
という意味ッピね~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
いつものやつだな!
入力したコード >
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
let a = "Hello World";
document.write(a);
</script>
<!-- ここまで! -->
</body>
</html>
出力結果 >
Hello World
文字数を数える命令文
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
さっそくやって行くッピよ~! 今回は文字数を数えるコードッピ!
let a = "Hello World";
document.write(a.length);
と入力するッピ!
できたらブラウザで確認してみるッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2021/09/2021-09-01_b_s1.png)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚.png)
お! 11になった!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
.length
をという命令を使って文字数を数えたッピ!
” Hello World “
で11文字という意味ッピね~
入力したコード >
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
let a = "Hello World";
document.write(a.length);
</script>
<!-- ここまで! -->
</body>
</html>
出力結果 >
11
変数のn番目の文字を取得する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次は少し特殊な文字の取得方ッピ!
変数を使って文字を取得するッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
let a = "good morning";
document.write(a[3]);
と入力してみるっぴ!
![](https://janken.asotetu.work/wp-content/uploads/2021/09/2021-09-01_b_s6.png)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
let a = “good morning”;
document.write(a[3]);
という意味ッピ!
同じく変数の1文字だけを抜き出す
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次は少し特殊な文字の取り出し方ッピ!
let a = "good morning";
document.write(a.charAt(3));
と入力するッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2021/09/2021-09-01_b_s6-1.png)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
おおお!
なんかさっきと同じふうに表示されたぞ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ふふふ、これがプログラミングのちからッピ!
これもさっきと同じように、1文字だけを抜き出すプログラムッピ!
document.write( a.charAt(3) );
という意味ッピ!
入力したコード >
let a = "good morning";
document.write(a.charAt(3));
出力結果 >
d
文章の切り抜きをする命令文
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
特定の文章を抜き出す命令文もあるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
↓の文をコピーして
let a = "Hello World";
document.write(a.substr(0,2));
と入力するッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2021/09/2021-09-01_b_s2.png)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚.png)
He
って表示されたぞ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
let a = “Hello World”;
document.write(a.substr(0,2));
という意味ッピ!
スタートから2番目まで = He
を抜き出したッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
変数.substr(抜き出し開始の数字, 抜き出し終了文字)
で文字を抜き出すことができるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
なるほどな~
文章の前をはぶいて切り抜きをする命令文
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
他にも前をはぶいて切り抜きをすることも可能だッピ!
let a = "Hello World";
document.write(a.substring(4,a.length));
![](https://janken.asotetu.work/wp-content/uploads/2021/09/2021-09-01_b_s3.png)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
let a = “Hello World”;
document.write(a.substring(4, a.length));
という意味ッピ!
入力したコード >
let a = "Hello World";
document.write(a.substr(0,2));
出力結果 >
He
入力したコード >
let a = "Hello World";
document.write(a.substring(4,a.length));
出力結果 >
o World
文字を取得し《大文字》にする
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次は取得した小文字を大文字にする方法ッピ!
変数.toUpperCase();
を使って大文字にへんかんするッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
変数を使う場合は
let a = "Hello World";
document.write(a.toUpperCase());
と入力するッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2021/09/2021-09-01_b_s4.png)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
すっげーな!
入力したコード >
let a = "Hello World";
document.write(a.toUpperCase());
出力結果 >
HELLO WORLD
取得した文字をすべて小文字にする
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
最後は文字をすべて小文字にする方法ッピ!
toLowerCase(“文字列“)
というやり方で小文字にすることができるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
変数を使う場合は、
let a = "Hello World";
document.write(a.toLowerCase());
という風に入力してみるッピよ~!
![](https://janken.asotetu.work/wp-content/uploads/2021/09/2021-09-01_b_s5.png)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
やったな!
入力したコード >
let a = "Hello World";
document.write(a.toLowerCase());
出力結果 >
hello world
大文字と小文字の違いは?
大文字にする命令文と小文字にする命令文。
これらを見分ける方法は、文章をよくみる必要があります。
toUpperCase //大文字にする命令文
toLowerCase //小文字にする命令文
上のような違いがあります。
単語の最初のみを大文字にする
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
単語の最初のみを大文字にする命令文もあるッピ!
.charAt(数字)
.toUpperCase( 数字 )
.substring( 数字 )
.toLowerCase( 数字 )
すべてを使うッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
let a = "good morning";
document.write(a.charAt(0).toUpperCase() + a.substring(1).toLowerCase());
と入力して確認してみるッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2021/09/2021-09-01_b_s7.png)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
単語の最初だけ大文字になった!
入力したコード >
let a = "good morning";
document.write(a.charAt(0).toUpperCase() + a.substring(1).toLowerCase());
出力結果 >
Good morning
- 文字数を数えるlength
- 文字を大文字にするtoUpperCase
- 文字を小文字にするtoLowerCase
- 変数の1文字を取り出すcharAt
- 変数のAからBまでの文字を取り出すsubstring
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
上手くできたッピか?
これからも色んなゲーム作りやプログラムの解説をしていくッピ!
次回も楽しみにしているッピよ~~!