javascript charAtを使用せずに文字列から指定した1文字を取得する
- 作成日 2021.01.08
- 更新日 2022.08.01
- javascript
- javascript

javascriptで、charAtを使用せずに文字列から指定した1文字を取得するサンプルコードを記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 103.0.5060.134
1文字を取得
以下のように、「[]」を使用すると、「charAt」を使用せずに指定した位置の文字を取得することが可能です。
const str = 'mebee';
console.log(str[0]); // 結果 m
console.log(str[1]); // 結果 e
console.log(str[2]); // 結果 b
console.log(str[3]); // 結果 e
console.log(str[4]); // 結果 e
存在しない位置を指定した場合は「」が返ります。
const str = 'mebee';
console.log(str[5]); // undefined
console.log(str[-1]); // undefined
サンプルコード
以下は、charAtを使用せずに、フォームから入力した文字列を
「 表示 」ボタンをクリックして、liタグで1文字ずつ表示するサンプルコードとなります。
※cssには「bootstrap5」を使用してます。「bootstrap5」は、IEのサポートを終了してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<style>
.main {
margin: 0 auto;
margin-top: 200px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 30px;
}
</style>
<script>
function hoge() {
// フォームの値を取得
let str = document.getElementById('foo').value;
//フロントに表示するため配列に代入
let text = [];
for (let i = 0; i < str.length; i++) {
text.push('<li class="list-group-item">' + str[i] + '</li>')
}
//innerHTMLを使用して表示
let txt = document.getElementById("txt");
txt.innerHTML = text.join('');
}
window.onload = function () {
// ボタンを取得
let elmbtn = document.getElementById('btn');
// クリックイベントを登録
elmbtn.onclick = function () {
hoge();
};
}
</script>
<body>
<div class="main container">
<h2><span class="badge bg-primary">1文字ずつ表示</span></h2>
<ul id="txt" class="list-group list-group-flush"></ul>
<div class="row">
<div class="input-group mb-3">
<span class="badge bg-dark">テキスト</span>
<input id="foo" type="text" class="form-control">
</div>
</div>
<div class="row">
<button id="btn" type="button" class="btn btn-warning">
表示
</button>
</div>
</div>
</body>
</html>
文字列が1文字ずつ表示されていることが確認できます。

また、js部はアロー関数やdocument.getElementByIdを省略して記述して簡略化することが可能です。
// アロー化
const hoge = () => {
// document.getElementById省略
let str = foo.value;
let text = [];
// テンプレートリテラル
for (let i = 0; i < str.length; i++) {
text.push(`<li class="list-group-item">${str[i]}</li>`)
}
//document.getElementById省略
txt.innerHTML = text.join('');
}
// アロー化
window.onload = () => {
// アロー化とdocument.getElementById省略
btn.onclick = () => { hoge() };
}
-
前の記事
Nuxt.js ライブラリ「vue-multi-split-pane」を使用してマルチスプリットペインを実装する 2021.01.08
-
次の記事
javascript appendChildでノードを最後に追加する 2021.01.08
コメントを書く