URI.js：JavaScript中的URI处理利器

在Web开发中，经常需要对URL进行解析和操作。URI.js是一个强大的JavaScript库，它提供了一整套工具来简化这些任务。本文将介绍URI.js的一些常用方法和API，包括如何获取文件名和解析URI。

简介

URI.js是一个独立的库，可以在浏览器和Node.js环境中使用。它支持最新和旧的URL标准，使得处理URI变得简单而直观。

安装

你可以通过npm来安装URI.js：

npm install urijs

esm 模块中使用：

import URI from 'urijs'

或者直接在HTML文件中通过script标签引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.19.11/URI.min.js"></script>

基本用法

创建URI实例

var uri = new URI("http://example.com/path?query=string#fragment");

解析URI

URI.js的parse方法可以将一个URI字符串分解为其组成部分：

var parts = URI.parse("http://example.com/path?query=string#fragment");
console.log(parts);
// 输出：{ protocol: 'http:', ..., path: '/path', ... }

访问URI组成部分

var parts = URI.parse("http://example.com/path?query=string#fragment");
console.log(parts);
// 输出：{ protocol: 'http:', ..., path: '/path', ... }

修改URI

uri.setPath("/newPath");
uri.setQuery("newKey=newValue");
uri.setFragment("newFragment");

编码和解码

var encoded = URI.encode("Hello, World!");
var decoded = URI.decode(encoded);

解析查询字符串

var query = uri.query(true); // 返回一个对象
console.log(query.newKey); // 输出：newValue

序列化URI

var serializedUri = uri.toString();

获取文件名

如果你需要从路径中提取文件名，可以使用filename方法：

var uri = new URI("http://example.org/foo/hello.html");
// get filename
uri.filename(); // returns string "hello.html" (no leading slash)
// set filename
uri.filename("world.xml"); // returns the URI instance for chaining
// uri == "http://example.org/foo/world.xml"

// will encode for you
uri.filename("hello world.html");
uri.filename() === "hello%20world.html";
// will decode for you
uri.filename(true) === "hello world.html";

高级用法

相对URI

var relativeUri = new URI("path?query");
relativeUri = baseUri.relativeTo(relativeUri);

比较URI

var isSame = uri1.equals(uri2);

构建绝对URI

var absoluteUri = relativeUri.absoluteTo();

结语

URI.js是一个功能丰富、易于使用的库，它提供了许多工具方法来处理URI。无论是简单的URI解析，还是复杂的URI操作，URI.js都能满足你的需求。