JavaScriptのreplace(全て/複数/gなどの正規表現/コードバック関数)

JavaScriptのtipsです。

目次

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"));  // NaN

trim;とfilter(Boolean);の違い

filter(Boolean)を使うと空文字以外も取り除かれます。

  • false
  • 0
  • ""(空文字列)
  • null
  • undefined
  • NaN
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]

ご参考になれば幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次