【JavaScript入門】URLの最後のPath・ディレクトリ名を削除する | split(), pop(), join()

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、JavaScriptで、URLの最後のPath・ディレクトリ名を削除する処理について解説して行きます。

1 URLの最後のDirectoryを削除する-Sample-Code
2 String.prototype.split()とは？
3 Array.prototype.pop()とは？
4 Array.prototype.join()とは？
5 JavaScript書籍 Ver. 中級-上級者向け
6 JavaScript書籍 Ver. 初級者向け
7 参考・引用
8 最近の投稿

URLの最後のDirectoryを削除する-Sample-Code

URLの最後のDirectoryNameを削除する場合、String.prototype.split() と Array.prototype.pop() , Array.prototype.join() の 3つのメソッドを使ってURL(文字列)を加工して行きます。

// < URLの加工: URLの最後のDirectoryを削除する >

const url = 'https://masanyon.com/generics';
const url2 = 'https://masanyon.com/generics/'; // URLの最後に「 / 」があるPattern

// 1. String.prototype.split() を使って「 / 」区切りで分解・分裂(split)させる。
const split_url = url.split('/');
const split_url2 = url2.split('/');

console.log(JSON.stringify(split_url)); // ["https:","","masanyon.com","generics"]
console.log(JSON.stringify(split_url2)); // ["https:","","masanyon.com","generics",""]

// 2. Array.prototype.pop() で最後の要素を削除する。
split_url.pop();

split_url2.pop();
split_url2.pop();

// 3. Array.prototype.join() で削除後の Path を「 / 」区切りで結合する。
const origin_url = split_url.join('/');
console.log({origin_url}); // {origin_url: 'https://masanyon.com'}

const origin_url2 = split_url2.join('/');
console.log({origin_url2}); // {origin_url2: 'https://masanyon.com'}

せっかくなので、この後は、String.prototype.split() と Array.prototype.pop() , Array.prototype.join() の 3つのMethodたちについて解説します。

String.prototype.split()とは？

String.prototype.split()メソッドは、 String を指定した区切り文字列で分割することにより、「文字列の配列」( [ String ] )に分割します。

引数であるseparatorは、何を基準に区切るのかを設定します。

上記のURLの解析では、URL特有の「 / 」を基準に区切っていました。

String.prototype.split() – 基本構文

構文: string.split(separator);

引数: 分割を行うところにある文字列です。文字列または正規表現を指定することができます。

実行結果(返値): 文字列の Array で、指定された文字列で separator が現れるたびに分割されたものです。

// < String.prototype.split() Sample-Test >

const str = 'Robotama is the best friend of the people of the Gunma Empire';

// 1. 空文字を判定して、区切るPattern
const words = str.split(' ');
console.log(words); // ['Robotama', 'is', 'the', 'best', 'friend', 'of', 'the', 'people', 'of', 'the', 'Gunma', 'Empire']

// 2. 空文字を指定すると、1単語ずつでSeparateされる。
const chars = str.split('');
console.log(chars); 

// < 出力結果 >
// ['R', 'o', 'b', 'o', 't', 'a', 'm', 'a', ' ', 'i', 's', ' ', 't', 'h', 'e', 
// ' ', 'b', 'e', 's', 't', ' ', 'f', 'r', 'i', 'e', 'n', 'd', ' ', 'o', 'f', ' ', 
// 't', 'h', 'e', ' ', 'p', 'e', 'o', 'p', 'l', 'e', ' ', 'o', 'f', ' ', 
// 't', 'h', 'e', ' ', 'G', 'u', 'n', 'm', 'a', ' ', 'E', 'm', 'p', 'i', 'r', 'e']

// 3. 区切り指定のSeparatorがないから、1つの配列に格納して返却する
const strCopyArray = str.split();
console.log(strCopyArray); // ['Robotama is the best friend of the people of the Gunma Empire']

Array.prototype.pop()とは？

Array.prototype.pop() メソッドは、配列から最後の要素を取り除き、呼び出し元にその値を返します。

このメソッドは配列の長さを変化させる「破壊的-Method」です。

pop は「はじける」と言う意味の英単語で、PopcornのPopをイメージしてもらうとわかりやすいかもしれません。

Array.prototype.shift() は、「配列の最初の要素を取り除き、呼び出し元にその値を返します。」

もちろん、こちらも破壊的-Methodです。

Array.prototype.pop() – 基本構文

構文: arrayName.pop();

実行結果(返値): 配列の最後の要素を削除。呼び出し元に配列の最後の要素(popした値)を返す。ただし、配列が空だった場合は、undefined。

// < Array.prototype.pop() Sample-Test >

const devRobotama = ['ロボ・ボール', '量産型・ロボ玉', 'ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];

// 1. 返り値は、弾け飛んだ(Popした)ロボ玉試作3号機
console.log(devRobotama.pop()); // ロボ玉試作3号機

// 2. pop()は、破壊的-Methodなので配列を直接操作してデータを変える。
console.log(devRobotama); // ['ロボ・ボール', '量産型・ロボ玉', 'ロボ玉試作1号機', 'ロボ玉試作2号機']

devRobotama.pop();
console.log(devRobotama); // ['ロボ・ボール', '量産型・ロボ玉', 'ロボ玉試作1号機']

Array.prototype.join()とは？

Array.prototype.join() メソッドは、配列 (または配列風オブジェクト) の全要素を順に連結した文字列を新たに作成して返します。

String.prototype.split() が FromStringToArray だったのに対して、

こちらのArray.prototype.join()は、FromArrayToStringだということがわかります。

引数であるseparatorは、何を基準に文字列を連結するのかを設定します。

区切り文字はカンマ、または指定された文字列で、separatorを省略した場合、配列の要素はカンマ (“,”) で区切られます。

また、separator に空文字列を渡した場合、すべての要素の間が区切り文字無しで繋がれます。

実行結果は、配列のすべての要素が連結された1つの文字列です。

Array.prototype.join() – 基本構文

構文: array.join( separator );

引数: separator

separator には、配列の各要素を区切る文字列を指定します。 separator は、必要であれば文字列に変換されます。

省略した場合、配列の要素はカンマ (",") で区切られます。 

separator に空文字列を渡した場合、すべての要素の間が区切り文字無しで繋がれます。

実行結果(返値): 配列の全要素が連結された文字列です。 

arr.length が 0 だった場合、空の文字列が返されます。

配列のすべての要素を文字列に変換したものが、1 個の文字列に繋がれます。

Array.prototype.join() の挙動をconsole.log()で試すと次のようなものになります。

// < Array.prototype.join() Sample-Test >

const attribute = ['風', '水', '火'];

console.log(attribute.join()); //  風,水,火

console.log(attribute.join('')); // 風水火

console.log(attribute.join(', ')); // 風, 水, 火

console.log(attribute.join(' + ')); // 風 + 水 + 火

console.log(attribute.join('-')); // 風-水-火

console.log(attribute.join(' - ')); // 風 - 水 - 火

console.log(attribute.join(12)); // 風12水12火 => Number型も文字列変換されて結合される。

console.log(attribute.join(true)); // 風true水true火 => Boolean型も文字列変換されて結合する。

console.log(attribute.join([])); // 風水火 => 空文字・指定と同じ結果

console.log(attribute.join(['tama'])); // 風tama水tama火

console.log(attribute.join({tama: 'tama'})); // 風[object Object]水[object Object]火 => NG

以上、JavaScriptでのURLの最後のディレクトリ名削除・加工と、String.prototype.split(), Array.prototype.pop() , Array.prototype.join() の Methodたちの解説でした。