URL 매개변수와 JS 객체의 상호 변환 방법에 대해 이야기해 보겠습니다.

프런트엔드 개발 과정에서 우리는 JavaScript의 URL 매개변수와 객체를 서로 변환해야 하는 상황에 자주 직면합니다. 예를 들어, 페이지의 동작을 제어하기 위해 URL 쿼리 매개변수를 사용해야 하는 경우, 작업을 위해 URL 매개변수를 JavaScript의 개체로 구문 분석해야 하거나 페이지의 일부 데이터를 서버에 전달해야 하는 경우 요청을 위해 객체를 URL 매개변수로 변환합니다.

이 글에서는 JavaScript의 URL 매개변수와 객체 간의 상호 변환 방법을 소개하고 몇 가지 실용적인 코드 예제를 제공합니다.

1. URL 매개변수를 JavaScript 개체로 변환

URL 매개변수를 JavaScript 개체로 변환하려면 먼저 URL 매개변수를 문자열로 구문 분석한 다음 이를 개체로 구문 분석해야 합니다.

1.1 URL 매개변수를 문자열로 구문 분석

JavaScript의 window.location.search 메소드를 사용하여 현재 페이지 URL에서 쿼리 매개변수를 가져올 수 있습니다. 이 메소드에서 반환된 문자열에는 URL에서 ? 뒤의 모든 내용이 포함되지만 # 및 그 뒤에 오는 앵커 매개변수는 포함되지 않습니다. window.location.search 方法来获取当前页面 URL 中的查询参数。这个方法返回的字符串包含了 URL 中 ? 之后的所有内容，但不包括 # 以及其后面的锚点参数。

以下是一个获取当前页面 URL 查询参数的示例代码：

const queryString = window.location.search;

如果我们希望获取其他页面 URL 中的查询参数，可以使用 new URL(urlString).search 方法，将需要解析的 URL 传入即可。例如：

const url = "https://example.com/page/?name=John&age=20";
const queryString = new URL(url).search; // 返回"?name=John&age=20"

1.2 解析查询参数为对象

接下来，我们需要将查询参数的字符串解析为 JavaScript 中的对象。我们可以手动编写一个解析函数，但是这里推荐使用第三方库 query-string，该库提供了一些便捷的解析方法。

首先，我们需要使用 npm 或 yarn 来将 query-string 库添加至项目中：

npm install query-string --save
# 或者
yarn add query-string

然后我们便可以使用该库中提供的 parse 方法，将 URL 查询参数的字符串转化为对象。例如：

import queryString from 'query-string';

const values = queryString.parse(queryString);

其中，values 就是一个解析后的对象。例如，如果 queryString 为 "?name=John&age=20"，那么 values 就为 {name: "John", age: "20"}。

2. JavaScript 对象转化为 URL 参数

当我们需要将 JavaScript 中的对象转化为 URL 参数时，我们需要将对象中的每个键值对进行拼接，形成一个 URL 查询参数的字符串。

2.1 将对象转化为字符串

我们可以手动编写一个转化函数，首先遍历对象中的所有键值对，将它们转化为 "key=value" 格式，然后用 "&" 符号连接起来。例如：

function toQueryString(obj) {
  const parts = [];
  
  for (const [key, value] of Object.entries(obj)) {
    parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
  }
  
  return parts.join('&');
}

const values = {
  name: "John",
  age: 20
};

const queryString = toQueryString(values);
// 返回 "name=John&age=20"

注意，我们在将每个键值对编码为字符串时，使用了 encodeURIComponent 方法。这个方法可以将字符串中的特殊字符进行编码，防止出现非法的 URL 查询参数。例如，如果键值对中包含一个特殊字符 "?", 它会被转换为 "%3F" 这样的编码字符串。

2.2 将字符串添加到 URL 中

现在我们已经将 JavaScript 对象转化为了一个字符串，接下来的任务就是将它加入到 URL 中。

如果我们要直接修改当前窗口 URL 中的查询参数，可以使用 window.location.search 属性来修改。例如：

const queryString = toQueryString(values);
window.location.search = queryString;

如果我们是要构造一个新的 URL，并进行跳转，可以使用 window.location.href 属性或者 window.location.replace 方法。例如：

const queryString = toQueryString(values);
const url = `https://example.com/page/?${queryString}`;
window.location.href = url;
// 或者
window.location.replace(url);

注意，这里我们需要自己拼接完整的 URL，而不能简单地使用 window.location.search。因为 search 属性只会返回当前 URL 中的查询参数部分，我们还需要手动拼接主机名、路径名以及锚点参数等。

总结

本文介绍了 URL 参数和 JavaScript 中对象的相互转化方法。我们可以通过 location.search 方法获取 URL 中的查询参数，并使用 query-string

다음은 현재 페이지 URL의 쿼리 매개변수를 가져오는 샘플 코드입니다.

rrreee

다른 페이지의 URL에서 쿼리 매개변수를 가져오려면 새 URL(urlString)을 사용할 수 있습니다. 검색 메소드가 필요합니다. 구문 분석된 URL을 전달하기만 하면 됩니다. 예: 🎜rrreee🎜1.2 쿼리 매개변수를 객체로 구문 분석 🎜🎜다음으로, 쿼리 매개변수 문자열을 JavaScript의 객체로 구문 분석해야 합니다. 파싱 ​​함수를 수동으로 작성할 수 있지만 몇 가지 편리한 파싱 방법을 제공하는 타사 라이브러리 query-string을 사용하는 것이 좋습니다. 🎜🎜먼저 npm 또는 Yarn을 사용하여 query-string 라이브러리를 프로젝트에 추가해야 합니다. 🎜rrreee🎜그런 다음 라이브러리에서 제공되는 parse 메서드를 사용할 수 있습니다. , URL 쿼리 매개변수 문자열을 객체로 변환합니다. 예: 🎜rrreee🎜여기서 values는 구문 분석된 객체입니다. 예를 들어 queryString이 "?name=John&age=20"인 경우 values는 {name: "John", age입니다. : "20"}. 🎜

🎜JavaScript 개체를 URL 매개변수로 변환🎜🎜🎜JavaScript의 개체를 URL 매개변수로 변환해야 하는 경우 개체의 각 키-값 쌍을 연결하여 URL 문자열을 형성해야 합니다. 쿼리 매개변수. 🎜🎜2.1 객체를 문자열로 변환🎜🎜수동으로 변환 함수를 작성할 수 있습니다. 먼저 객체의 모든 키-값 쌍을 반복하고 이를 "키=값" 형식으로 변환한 다음 "&" 기호로 연결할 수 있습니다. 예: 🎜rrreee🎜각 키-값 쌍을 문자열로 인코딩할 때 encodeURIComponent 메서드를 사용한다는 점에 유의하세요. 이 방법은 잘못된 URL 쿼리 매개변수를 방지하기 위해 문자열에 특수 문자를 인코딩할 수 있습니다. 예를 들어 키-값 쌍에 특수 문자 "?"가 포함되어 있으면 "%3F"와 같은 인코딩된 문자열로 변환됩니다. 🎜🎜2.2 URL에 문자열 추가🎜🎜이제 JavaScript 개체를 문자열로 변환했으므로 다음 작업은 이를 URL에 추가하는 것입니다. 🎜🎜현재 창 URL의 쿼리 매개변수를 직접 수정하려면 window.location.search 속성을 ​​사용하여 수정할 수 있습니다. 예: 🎜rrreee🎜새 URL을 생성하고 점프하려면 window.location.href 속성이나 window.location.replace 메서드를 사용할 수 있습니다. 예: 🎜rrreee🎜 여기서는 단순히 window.location.search를 사용하는 대신 전체 URL을 직접 연결해야 합니다. search 속성은 현재 URL의 쿼리 매개변수 부분만 반환하므로 호스트 이름, 경로 이름, 앵커 매개변수 등도 수동으로 연결해야 합니다. 🎜🎜요약🎜🎜이 글에서는 자바스크립트에서 URL 매개변수와 객체의 상호변환 방식을 소개합니다. location.search 메소드를 통해 URL의 쿼리 매개변수를 가져올 수 있고 query-string 라이브러리를 사용하여 쿼리 매개변수 문자열을 JavaScript 개체로 구문 분석할 수 있습니다. 반대로 JavaScript 개체를 쿼리 매개변수 문자열로 변환하고 이를 URL에 추가하는 도우미 함수를 수동으로 작성할 수도 있습니다. 🎜🎜위 작업은 매우 간단하지만 실제 프론트엔드 개발에 자주 사용되는 내용이니 독자들에게 도움이 되었으면 좋겠습니다. 🎜

위 내용은 URL 매개변수와 JS 객체의 상호 변환 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!