JavaScriptのtipsです。
Contents
JavaScriptのreplace(全て/複数/gなど)
- 文字列を使った置き換えの場合:
replaceメソッドで文字列を使って置き換えを行う場合、マッチする最初の1つだけが置き換えられます。この例では、"apple"が2回出現していますが、最初の1つだけが"banana"に置き換えられています。
let str = "apple orange apple";
str = str.replace("apple", "banana"); console.log(str); // "banana orange apple" 正規表現を使った置き換えの場合: replace メソッドで正規表現を使って置き換えを行う場合、デフォルトでは最初の1つだけが置き換えられます。しかし、正規表現に g フラグ（グローバル検索）を付けると、マッチする全ての部分が置き換えられます。
この例では、"apple" が2回出現していますが、正規表現に g フラグが付けられているため、2回とも "banana" に置き換えられています。
let str = "apple orange apple";
str = str.replace(/apple/g, "banana"); console.log(str); // "banana orange banana" 要するに、replace メソッドで「複数」の部分を置き換えたい場合は、正規表現の g フラグを使用して「全て」のマッチする部分を置き換える必要があります。
JavaScriptのreplaceの正規表現で文字列から数字だけを抽出
正規表現を使う方法がよさそうです。
const data = 'type11'
const result = data.replace(/[^0-9]/g, '')
console.log(result) // 11複数のrandomをコールバック関数で抽出
Callback関数にすると、第2引数が文字列全部が入っているmatch、引数を抽出したものの順番になります。matchは使わないことが多いですけど、callback関数にしたとき文法的に必須です。
Hello, {random:Alice,Bob} from {random:Tokyo,Osaka}textCell = textCell.replace(/{random:([^}]+)}/g, function(match, optionsStr) {
const options = optionsStr.split(",");
return options[Math.floor(Math.random() * options.length)];
});
JavaScriptのreplace以外のtips
配列の空判定
空じゃない。すなわち0じゃない。
if ( array.length > 0)省略すると、
if ( array.length )空の場合は!をつければいいだけです。
if ( !array.length )この方法がシンプルです。この方法はオブジェクトはできません。
objectの空判定
配列と考え方は一緒。
Object.keys(obj).length;ただしオブジェクトが{}じゃないと判定できません。チェックボックスをオフにした次のようなものはダメ。
obj: {
name: "",
age: "",
hobby: "",
}その場合は事前に空プロパティのkeyを削除するを取り除く必要があります。
for (const key in this.obj) {
if (this.obj[key] === '') {
delete this.obj[key]
}
}parseIntとNumberの使い分け
Numberは文字列全体が数値であるべきで、それ以外の場合はエラー（NaN）を返すことが望ましい。小数点やマイナスもOK!
それ以外はparseInt。二進数や八進数、十六進数もOK。数値と文字が混ざっていても途中まで解析。
console.log(parseInt("1101", 2)); // 13
console.log(parseInt("123", 8)); // 83
console.log(parseInt("A", 16)); // 10
console.log(parseInt("123px")); // 123
console.log(parseInt("abc123")); // NaNtrim;とfilter(Boolean);の違い
filter(Boolean)を使うと空文字以外も取り除かれます。
false0""（空文字列）nullundefinedNaN
const array = ["", "apple", " banana ", "cherry\n", "\n", "date ", " "];
console.log("Before trim:", array);
const trimmedArray = array.map(str => str.trim());
console.log("After trim:", trimmedArray);
const resultWithBoolean = trimmedArray.filter(Boolean);
console.log("After filter(Boolean):", resultWithBoolean);
// Output:
// Before trim: ["", "apple", " banana ", "cherry\n", "\n", "date ", " "]
// After trim: ["", "apple", "banana", "cherry", "", "date", ""]
// After filter(Boolean): ["apple", "banana", "cherry", "date"]URL内の0は消さないため心配しなくてもよい
const values = ["https://example.com/0path", "https://example.com/path", "", null, undefined];
const filtered = values.filter(Boolean);
console.log(filtered); // ["https://example.com/0path", "https://example.com/path"]文字列の先頭と末尾を削除
const a = str.slice( 2 ) ; // 先頭から2文字を削除
const b = str.slice( 0, -2 ) ; // 末尾から2文字を削除スプレッド構文(...)
スプレッド構文(...)は、配列やオブジェクトの要素を展開するために使用されます。配列の場合、[...]の中に配列を記述することで、その配列の要素を展開して新しい配列に組み込むことができます。
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2];
console.log(newArr); // [1, 2, 3, 4, 5, 6]ご参考になれば幸いです。
コメント