こんにちは、こずえです。
プログラミング学習記録64日目です。
JavaScriptについて学習しました。
所感：今週は忙しくなりそうです…！
目次
合計学習時間
前回までの時間：129.00[h]
今回の時間：2.75[h]
合計時間：131.75[h]
学習内容
前回と同様に以下のサイトを読み進めていきました。
今回は「四章第一回 文字列の操作」から「四章第三回 正規表現2」までを読みました。
以下自分まとめです。
まとめるのに時間を掛け過ぎてしまうことで進みが遅くなっているため、今回は手を動かした分をそのまま記事にしてみました。
文字列の検索
console.group('---文字列の検索---');
console.group('indexOf');
var str = 'hoge';
// 文字の位置を返す
var idx1 = str.indexOf('g');
var idx2 = str.indexOf('a'); // 存在しない場合は-1
console.log({"idx1":idx1, 'idx2':idx2}); // {idx1: 2, idx2: -1}
console.groupEnd(); // indexOf
console.groupEnd(); // ---文字列の検索---
文字列から指定の範囲を返す
console.group('---文字列から指定の範囲を返す---');
/* slice */
console.group('slice');
var str = 'FooBarHoge';
var str1 = str.slice(3, 6); // 終了位置の1つ手前までが返される
var str2 = str.slice(6, -1); // 負の値を指定した場合後ろから数える
var str3 = str.slice(0); // 第2引数を省略すると末尾まで
// ↓ {str1: "Bar", str2: "Hog", str3: "FooBarHoge"}
console.log({'str1':str1, 'str2':str2, 'str3':str3});
console.groupEnd(); // slice
console.group('substring');
var str = 'FooBarHoge';
var str1 = str.substring(0, 3);
var str2 = str.substring(-2, 2); // (0, 2)と同義
var str3 = str.substring(5, -3); // (5, 0)と同義
// ↓ {str1: "Foo", str2: "Fo", str3: "FooBa"}
console.log({'str1':str1, 'str2':str2, 'str3':str3});
console.groupEnd(); // substring
console.group('charAt');
var str = 'hoge';
// 1文字のみ返す
var str1 = str.charAt(1);
console.log({'str1':str1}); // {str1: "o"}
console.groupEnd(); // charAt
console.groupEnd(); // ---文字列から指定の範囲を返す---
0詰め
console.group('---0詰め---');
var num = 1234;
var len = 5;
var result = ("00000" + num).slice(5 * -1);
console.log({'num':num, 'len':len, 'result':result}); // 01234
console.groupEnd(); // ---0詰め---
コードポイント
console.group('---コードポイント---');
// ↓ {ホット \u28ff ドッグ \u{1F32D}: "ホット ⣿ ドッグ ?"}
console.log({'ホット \\u28ff ドッグ \\u\{1F32D\}':'ホット \u28ff ドッグ \u{1F32D}'});
console.groupEnd(); // ---コードポイント---
正規表現
正規表現オブジェクトの作成と正規表現リテラル
// 正規表現オブジェクトの作成
var r1 = new RegExp('ab+c');
// 正規表現リテラル
var r2 = /ab+c/
testメソッド
console.group('testメソッド');
// 正規表現オブジェクトの作成
var r1 = new RegExp('ab+c');
// 正規表現リテラル
var r2 = /ab+c/
var str1 = 'abbbc';
var str2 = 'abbbd';
var result1 = r2.test(str1);
var result2 = r2.test(str2);
// ↓ {r2: /ab+c/, str: "abbbc", result: true}
// ↓ {r2: /ab+c/, str: "abbbd", result: false}
console.log(
{'r2':r2, 'str1':str1, 'result':result1},
{'r2':r2, 'str2':str2, 'result':result2}
);
console.groupEnd(); // testメソッド
matchメソッド
var str1 = 'abcabcbbbacabcbbbbabac';
var r1 = /bcb{3,}a/;
var result1 = str1.match(r1);
console.log({'str1':str1, 'r1':r1});
// ↓ result1
// ↓ ["bcbbba", index: 4, input: "abcabcbbbacabcbbbbabac", groups: undefined]
console.log('result1 = ', result1);
キャプチャ
console.group('キャプチャ');
var str2 = "aabcbcacbuccb";
console.group('あり');
var r2 = /a(.{5})c/;
var result2 = str2.match(r2); // キャプチャあり
// ↓ {result2[0]: "abcbcac", result2[1]: "bcbca"}
console.log({
'str2':str2,
'r2':r2,
'result2[0]':result2[0],
'result2[1]':result2[1]
});
console.groupEnd(); // あり
console.group('なし');
var r3 = /a(?:.{5})c/;
var result3 = str2.match(r3); // キャプチャなし
// ↓ {result3[0]: "abcbcac", result3[1]: undefined}
console.log({
'str2':str2,
'r3':r3,
'result3[0]':result3[0],
'result3[1]':result3[1]
});
console.groupEnd(); // なし
console.groupEnd(); // キャプチャ
replace
console.group('replace');
var str = 'HogeFooHogeFoo';
var r1 = /(?:Foo)/;
var rep_str = 'Bar';
var result = str.replace(r1, rep_str); // 先頭から1パターンのみ置換される
// ↓ {str: "HogeFooHogeFoo", r1: /(?:Foo)/, rep_str: "Bar", result: "HogeBarHogeFoo"}
console.log({'str':str, 'r1':r1, 'rep_str':rep_str, 'result':result});
console.groupEnd(); // replace
フラグ
console.group('フラグ');
console.group('iフラグ…大文字小文字を区別しない');
// ↓ r=(/abc/i) str='ABCDE' ["ABC", index: 0, input: "ABCDE", groups: undefined]
console.log('r=(/abc/i)', 'str=\'ABCDE\'', 'ABCDE'.match(/abc/i));
console.groupEnd(); // iフラグ
console.group('gフラグ…複数回マッチ（置換の際に便利）');
// ↓ r=(/abc/gi) str='ABCDEABC' (2) ["ABC", "ABC"]
console.log('r=(/abc/gi)', 'str=\'ABCDEABC\'', 'ABCDEABC'.match(/abc/gi));
console.groupEnd(); // gフラグ
console.groupEnd(); // フラグ
便利だと感じた情報
console.logの様々な活用方法がまとめられています。
今回読みながら手を動かす際にconsole.group()を活用してみました。今回のログは以下のようになりました。このような形式であれば続けて書き続けてもソースと結果の対応がわかりやすいですね。
